uni-app頁面多個picker ,如何解決不衝突

 json數據:

treatFeature: [
				{ newindex: 0, key: 'strength', name: '力度', types: ['力度偏弱', '力度適中', '力度偏強'] },
				{ newindex: 0, key: 'full', name: '飽滿度', types: ['脈體不充盈', '充盈適中', '脈體充盈'] },
				{ newindex: 0, key: 'thickness', name: '粗細度', types: ['偏細', '粗細適中', '偏粗'] },
				{ newindex: 0, key: 'temperature', name: '溫度', types: ['體溫涼', '體溫正常', '體溫熱'] },
				{ newindex: 0, key: 'potential', name: '脈勢', types: ['脈勢小', '脈勢大'] },
				{ newindex: 0, key: 'speed', name: '緩急', types: ['緩動', '急動'] },
				{ newindex: 0, key: 'soft', name: '剛柔', types: ['柔', '剛柔適中', '剛'] },
				{
					newindex: 0,
					key: 'Depression',
					name: '鬱',
					types: ['左位鬱', '左輊右輊裏鬱', '右輊左軒', '左軒右軒表鬱', '左位鬱右位鬱', '左側鬱', '右位鬱', '左側鬱', '左側鬱左輊']
				},
				{ newindex: 0, key: 'Stasis', name: '淤', types: ['輕度瘀', '中度瘀', '重度瘀'] },
				{ newindex: 0, key: 'water', name: '水', types: ['輕度痰', '中度痰'] },
				{ newindex: 0, key: 'wet', name: '溼', types: ['輕度溼', '中度溼', '重度溼'] },
				{ newindex: 0, key: 'sputum', name: '痰', types: ['輕度痰', '中度痰'] }
			]

頁面結構代碼:

<view class="uni-form-item uni-column">
				<view class="title">脈象特徵</view>
				<view class="uni-list" v-for="(feature, index) in treatFeature" :key="index">
					<view class="uni-label">{{ feature.name }}</view>
					<picker mode="selector" @change="bindPickerChange" :name="feature.key" :value="feature.newindex" :data-current="index" :range="feature.types">
						<!-- <view class="iconfont icon-arrow-down icon-item"></view> -->
						<view class="uni-input">{{ feature.types[feature.newindex] }}</view>
					</picker>
				</view>
			</view>

 JavaScript邏輯代碼:

bindPickerChange: function(e) {
			const curindex = e.target.dataset.current;		
			this.treatFeature[curindex].newindex = e.target.value;
			
		},

成功解決:

原文章鏈接

https://blog.csdn.net/yangsitong1314/article/details/77672415

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章