学习记录，小程序（广场页）

小程序笔记(流水账)

初始页面结构分为4个页面

在app.json里,第一个就表示默认第一个显示

  "pages": [
    "page/home/home",
    "page/message/message",
    "page/my/my",
    "page/publish/publish"
  ],

新建tab-bar

"selectedColor": "#fbc02d",
"list": [
  {
    "pagePath": "page/home/home",
    "text": "广场",
    "iconPath": "images/tabbar/guangchang.png",
    "selectedIconPath": "images/tabbar/guangchang1.png"
  },
  {
    "pagePath": "page/publish/publish",
    "text": "发布",
    "iconPath": "images/tabbar/fabu.png",
    "selectedIconPath": "images/tabbar/fabu1.png"
  },
  {
    "pagePath": "page/message/message",
    "text": "消息",
    "iconPath": "images/tabbar/xiaoxi.png",
    "selectedIconPath": "images/tabbar/xiaoxi1.png"
  },
  {
    "pagePath": "page/my/my",
    "text": "我的",
    "iconPath": "images/tabbar/my.png",
    "selectedIconPath": "images/tabbar/my1.png"
  }
]

自定义组件 在最外层新建一个compontents文件夹，新建一个tabs的compontents的组件

    `{
      "usingComponents": {
        "i-tabs":"/components/tabs/tabs"
      }
    }`

组件引用

    `tabshjj="{{tabs}}"`
    tabs是home.js 的data里面定义的
    

tabshjj是在子组件里的properties定义一个tabshjj的对象

子组件结构

data- 这个后面可以定义名字用来handleChange的方法里接收

通过方法点击 this.setData({ currentindex:index }) 更新currentindex

this.triggerEvent('change',{index}) change定义父组件名字用来告诉父组件的index做后续操作 handleChangenew方法就可以拿到子组件传过来的index

接口封装

创建model 装每个不同类型用到的js，方便整齐查看（个人习惯） 之后在home的js里引用

import categoty from "../../model/categoty/categoty"

编写下拉刷新和上拉刷新

修改实例方法

下拉刷新比较简单的方法就是重新创建实例，不然如果上拉刷新的时候page页码已经改变了，这时候调用方法的时候的page会错乱，所以一定重新new一个实例对象 （一个实例状态是有状态的，只要重新new一个，双方不会有影响）

点击上方类型调用接口