Foreword:
Recently, I used the native WeChat applet writing method to write WeChat applets for medical related projects. When editing personal data, many selectors are needed, such as urban area selectors, professional title selectors, department selectors, school selectors, and education selectors. Year Date Picker...........
In short, it is used in many places, but there are very few such documents in WeChat documents, and some of them are not suitable for projects. Needs to be remodeled. Hence, there is this article.
This is the PC selector for editing user information. The applet has the same function and calls the data returned by the interface in the PC selector.
(some selector style features for pc)
Let’s take a look at some of WeChat’s own selectors
WeChat has its own selector through train ======》》》》》》 picker
Like some titles and years above, you can directly use the built-in ordinary selector to do it
wxml
<view class="tui-picker-content">
<view class="tui-picker-name">补全信息</view>
<picker bindchange="changeOption" mode="selector" range-key="label" value="{
{optionindex}}" range="{
{mobileOptions}}" style="width: 76%;">
：<text class="tui-picker-detail">{
{mobileOptions[optionindex].label}}</text>
<image src="/images/select_down.png" mode=""></image>
</picker>
</view>js
//数据
mobileOptions: [{
roleid: 1,
label: '执业医师'
}, {
roleid: 5,
label: '医学生'
}, {
roleid: 0,
label: '其他'
}],
// 选择补充信息
changeOption(e) {
console.log(e, 'eeeee',this.data.mobileOptions[e.detail.value].roleid)
this.setData({
roleid: this.data.mobileOptions[e.detail.value].roleid,
optionindex: e.detail.value
});
//职业医师
if (this.data.mobileOptions[e.detail.value].roleid == 1) {
}
//医学生
if (this.data.mobileOptions[e.detail.value].roleid == 1) {
}
//其他
if (this.data.mobileOptions[e.detail.value].roleid == 0) {
}
},multi-level selector
<!--pages/picker/picker.wxml-->
<view>
<view class="tui-picker-content">
<view class="tui-picker-name">科室</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange_keshi" bindcolumnchange="bindMultiPickerColumnChange_keshi"
value="{
{multiIndex}}" range="{
{newArr}}">
<view class="picker">
：<van-button type="primary" style="font-size:28rpx;">{
{division?division:'请选择科室'}}</van-button>
</view>
<image bindchange="changeRegin" src="/images/select_down.png" mode="" ></image>
</picker>
</view>
</view>
Data Format
// pages/picker/picker.js
import {
config
} from '../../config.js'
Page({
onShareAppMessage() {
return {
title: 'picker',
}
},
/**
* 页面的初始数据
*/
data: {
//科室
multiArray:[],
multiIndex: [0, 0, 0],
multiIds: [],
newArr: [],
},
onShow: function() {
console.log('onShow')
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
bindMultiPickerChange_keshi(e) {
console.log(this.data.multiIds);
let name = this.data.multiIds.map(i=>i.name).join('/')
console.log(name,'科室name===')
this.setData({
division:name
})
},
bindMultiPickerColumnChange_keshi(e) {
let data = {
newArr: this.data.newArr,
multiIndex: this.data.multiIndex,
multiIds: this.data.multiIds,
};
data.multiIndex[e.detail.column] = e.detail.value;
let searchColumn = () => {
let arr1 = [];
let arr2 = [];
this.data.multiArray.map((v, vk) => {
if (data.multiIndex[0] === vk) {
data.multiIds[0] = {
...v,
};
v.children.map((c, ck) => {
arr1.push(c.name);
if (data.multiIndex[1] === ck) {
data.multiIds[1] = {
...c,
};
// c.children.map((t, vt) => {
// arr2.push(t.name);
// if (data.multiIndex[2] === vt) {
// data.multiIds[2] = {
// ...t,
// };
// }
// });
}
});
}
});
data.newArr[1] = arr1;
data.newArr[2] = arr2;
};
switch (e.detail.column) {
case 0:
// 每次切换还原初始值
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
// 执行函数处理
searchColumn();
break;
case 1:
data.multiIndex[2] = 0;
searchColumn();
break;
}
this.setData(data);
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})Tail, look at the finished product
After reading it, remember to give it a like~~