序文：
最近、ネイティブの WeChat アプレット作成メソッドを使用して、医療関連プロジェクト用の WeChat アプレットを作成しました。個人データを編集する場合、都市エリア セレクター、専門職名セレクター、学部セレクター、学校セレクター、教育セレクターなど、多くのセレクターが必要です。日付ピッカー......
つまり、多くの場所で使用されていますが、WeChat ドキュメントにはそのようなドキュメントが非常に少なく、プロジェクトに適さないものもあります。改造が必要です。したがって、この記事があります。
これはユーザー情報を編集するための PC セレクターであり、アプレットも同様の機能を持ち、インターフェイスから返されたデータを PC セレクターで呼び出します。
(PC 用の一部のセレクター スタイル機能)
WeChat 独自のセレクターのいくつかを見てみましょう
WeChat には、train ======》》》》》 ピッカーを介した独自のセレクターがあります。
上記の一部のタイトルや年と同様に、組み込みの通常のセレクターを直接使用してそれを行うことができます
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) {
}
},マルチレベルセレクター
<!--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>
データ形式
// 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() {
}
})しっぽ、完成品を見てください
読んだ後は、ぜひ「いいね」をしてください~~