微信小程序-picker自定义选择/下拉刷新/到底部自动加载/改变上一个页面的data属性值

1.picker
效果：

小程序picker自带有时间等，下面是自定义的写法

	// bindchange="bindTypeChange"选中后的方法
	//range-key="name" 是一个对象数组，range-key=？显示哪个属性
    <picker range="{{disinfectionTypes}}" range-key="name" bindchange="bindTypeChange" class='val'>
      <view class="picker blue date">{{disinfectionTypesChoose.name||'消毒方式'}}</view>
    </picker>

js

data:{
    levelArray: ['食安等级', '等级A', '等级B', '等级C', '等级D'],
    levelSelected: {
      id: 0,
      value: '食安等级'
    },
    disinfectionTypes：[];
}
 /* 消毒方式获取 */
  getDisinfectionWay: function() {
    let that = this;
    ygPost.postGetSession("/Report/GetDisinfectionWay", {}, function(d) {
      if (d.data.isSuccess) {
        var all={id:-1,name:"全部"};
        d.data.data.unshift(all);
      that.setData({
        disinfectionTypes: d.data.data
      });
    }
    console.log(that.data.disinfectionTypes)//[{name:酒精，id:1},{name:消毒液，id:2}......]
    });
  },
  /* 消毒方式选择 */
  bindTypeChange: function (e) {
    let v = e.detail.value,
      that = this;
    that.data.disinfectionTypes.forEach(function (o, i) {//循环获取的消毒方式，如果选中的下标和消毒方式下标一样就改变disinfectionTypesChoose的值，
      if (i == v) {
         that.data.disinfectionTypesChoose = o;
        that.setData({
          disinfectionTypesChoose:o;//显示的值
        )};
      }
    });
    that.getDisinfectionRecord();//调事件
  },

2021-2.26 修改

    <picker bindchange="areaPickerChange" range="{{areaArray}}" range-key="name" value='{{areaSelected.id}}'>
      <view class="picker">
        {{areaSelected.value||'地区'}}
      </view>
      <image src="/images/xlChoose.png" class="icon_"></image>
    </picker>

    data: {
    areaArray: [{name:'阿坝',id:0},{name:'甘孜',id:121},{name:'四川',id:2}],//地区值
    areaSelected: {},//选择的地区
 	} 
 	  /**地区选择 */
 	areaPickerChange: function (e) {
    let that = this;
    that.setData({
      ["areaSelected.index"]: e.detail.value,//这个的值用于选择的之后 默认选中
      ["areaSelected.value"]: that.data.areaArray[e.detail.value].name,//选中展示的名字
      ["areaSelected.id"]:that.data.areaArray[e.detail.value].id,//选中值的id (传给后台的值)
    });
    console.log(that.data);
  },

2.下拉刷新（放在onUnload():funciton{} 后面）
data:

  data: {
    pageIndex: 0,
    pageSize: 15,
    pageCount: 0,
    disinfectionTypes: [], //消毒方式
    disinfectionTypesChoose:[], //选择的消毒方式
  },

js

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that = this;
    that.setData({
      pageIndex: 0,
    });
    that.getDisinfectionRecord();
  },

3.底部加载（放在onUnload():funciton{} 后面）

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let that = this;
    if (that.data.pageIndex < that.data.pageCount - 1) {
      that.setData({
        pageIndex: that.data.pageIndex + 1
      });
      that.getDisinfectionRecord();
    }
  },

4.获取url传来的参数
例：
A页面：

//详情
  goDetail: function (e) {
    var id = e.currentTarget.dataset["id"];
    wx.navigateTo({
      url: 'disfincted_add?recordId=' + id,
    })
  },

B页面获取参数（在option里面）

  onLoad: function(options) {
    if (options.recordId) {
      this.setData({
        recordId: options.recordId
      })
      this.getDisinfectedById();
    }
  },

5.B页面改变A页面的值
A页面

  data: {
    refresh: false,
  },
  //js
  /*生命周期函数--监听页面显示 在onshow里面*/
  onShow: function () {
    if (this.data.refresh == true) {
      this.getGoods()
    }
  },

B页面

        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2]; //上一个页面
        prevPage.setData({
          refresh:true//修改A页面的值
        })
        wx.navigateBack({
          delta: 1//返回上一页
        })

此例：A页面跳转b页面，b页面修改A页面data的某个的属性值，在返回A页面。回到A页面时，A页面重新利用此值。注意：B页面返回A页面用的缓存，并不会重新走onload函数，走的是onShow函数，所以重新利用此属性要放在onshow里面