微信小程序

页面跳转： navigator

• 显示跳转
  • 跳转普通页面
  • 跳转 tab栏页面 open-type="switchTab"
  • 回退上一个 open-type="navigateBack"

<navigator url="/pages/detail/detail?username='cc'&address='chengdu'">detailnavigator>

• js跳转
  • 跳转普通页面 wx.navigateTo()
  • tab栏页面 wx.switchTab()
  • 回退 wx.navigateBack()

接收页面跳转参数：

常用组件

文档： https://developers.weixin.qq.com/miniprogram/dev/component/

• view
  • hover-class ： 点击后的样式
  • hover-stop-propagation ： 阻止冒泡
• text
• navigator
• scroll-view
• swiper
• swiper-item
• button
• image
• rich-text ： 富文本

常用指令

• wx:if
• hidden : 是否隐藏

数据驱动

小程序数据默认不是双向绑定的，，数据驱动使用 this.setData() , 当页面input修改之后，不会响应input内容的变化

• 小程序数据双向绑定：
  使用 bindinput 监听input数据改变，改变之后this.setData() 实现数据更新

<input type="text" value="{{count}}" style="border: 1px solid red;" bindinput="handleInput"/>
{{ count }}

 handleInput(event){
    console.log(event)
    let val = parseInt(event.detail.value)
    this.setData({
      count:val
    })
  },

• 函数怎么传值
  小程序写() 表示函数传值，，他会将双引号中的所有内容，当作执行函数的名字，，不会去解析括号，，，小程序传值需要先绑定 data-xxx 属性值，，使用event.currentTarget.dataset.xxx 获取传入的值

<button bindtap="addCount" data-step="5">+stepbutton>

  addCount(event){
    let step = parseInt(event.currentTarget.dataset.step)
    this.setData({
      count:this.data.count+step
    })
  },

下拉刷新和上拉加载

下拉刷新加载数据，，每次到底，都会进行一次分页请求，，，分页的currentPage +1 ，，， 但是，如果不做控制 ，，currentPage 一直+1，，后面的分页请求获取的数据为 [] 。。。没有意义，，，
将 list的size 和 分页返回total总页数，作比较，，相等，表示数据已经加载完了，就应该显示没有更多的数据

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listData:[],
    queryParam:{
      currentPage:1,
      pageSize:10
    },
    total:0
  },
  getList(){
    return new Promise((resolve,reject)=>{
      wx.request({
        url: 'http://localhost:8080/getList',
        data:this.data.queryParam,
        success:(res)=>{
          resolve(res.data)
        },
        reject:(err)=>{
          reject(err)
        }
      })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  async onReady() {
    let res = await this.getList()
    console.log(res);
    this.setData({
      listData:res.records,
      total:res.total
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  async onPullDownRefresh() {
      console.log("pull down")
      this.setData({
        'queryParam':{currentPage:1,pageSize:10}
      })
      let res = await this.getList()
      this.setData({
        listData:res.records,
        total:res.total
      })
      // 停止下拉刷新
      wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  async onReachBottom() {
    console.log(typeof this.data.total)
    if(this.data.listData.length === this.data.total){
      return
    }
    console.log("reach bottom ...");
   
   this.setData({
     "queryParam.currentPage":this.data.queryParam.currentPage+1
   })
  let res =   await this.getList()
  
  this.setData({
    listData:[...this.data.listData,...res.records]
  })

  },


})

下拉刷新需要在 json中开启

下拉刷新完毕之后要 wx.stopPullDownRefresh() ,真机的下拉刷新不会自己消失