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里面