uni アプレットでのピッカー セレクター (州および都市スタイルの複数列セレクターなど) の使用
uni.app に付属するスクロール セレクター。通常セレクター、複数列セレクター、日付セレクター、イベントセレクター、県市セレクターのモード別に合計 5 つのメソッドがあります。この記事では、複数列セレクターの使用方法を説明します。
役に立った場合は、高評価をお願いします。 。 。いいぞ。 。 。いいぞ。 。
1: まずは効果を見る
ここには選択した第 2 レベルのデータのみが表示されます。他のレベルのデータが表示される場合は、下付き文字を入力するだけです。
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" @change='btnevt'>
<view class="canj-top-dis">
// 这里只展示下标1的数据，根据需求选择增加
<view class="uni-input">{
{
multiArray[1][multiIndex[1]] }}</view>
<uni-icons type="bottom" size="30"></uni-icons>
</view>
</picker>
変数の定義
multiIndex: [0, 0], // 选择器默认值
multiArray:[],
sendDate:{
sysid:''},
typedata:[]
インターフェースのデータ形式、データ処理方法
this.typedata = [
{
year: '2022',
value: 1,
children: [
{
name: '2022秋季', value: 1.1, sysid: '' },
{
name: '2022夏季', value: 1.2, sysid: '' },
],
},
{
year: '2023',
value: 2,
children: [
{
name: '2023秋季', value: 2.1, sysid: '' },
{
name: '2023夏季', value: 2.2, sysid: '' },
],
},
]
var column1 = [];
var column2 = [];
this.multiArray = [];
this.typedata.forEach((item, index) => {
column1.push(item.year);
if (index == 0) {
item.children.forEach((item2, index2) => {
column2.push(item2.name);
if (index2 == 0) {
this.sendDate.sysid = item2.sysid;
// console.log('获取的数据',item2)
}
});
}
});
this.multiArray.push(column1);
this.multiArray.push(column2);
スクロール中に選択されたデータの変更を処理する
bindMultiPickerColumnChange(e) {
console.log('修改的列为：' + e.detail.column + '，当前行为：' + e.detail.value);
this.multiIndex[e.detail.column] = e.detail.value;
var column2 = [];
// console.log('this.multiIndex[0]',this.multiIndex[0]); //第一列的当前行
// console.log('this.multiIndex[1]',this.multiIndex[1]); //第二列的当前行
this.typedata.forEach((item, index) => {
// console.log('item',item)
if (index == this.multiIndex[0]) {
item.children.forEach((item2, index2) => {
column2.push(item2.cjname);
if (index2 == this.multiIndex[1]) {
this.sendDate.sysid = item2.sysid;
// console.log('获取的数据',item2)
}
//拖动第一列后第二列对应的数据行数小于拖动前第二列的当前行
if (this.multiIndex[1] > item.children.length-1) {
this.sendDate.sysid = item.children[0].sysid;
//第二列的行回到第一行
this.multiIndex.splice(1, 1, 0);
}
});
}
});
this.multiArray[1] = column2;
this.$forceUpdate(); // 重新渲染
},
btnevt(){
console.log(this.sendDate)
},