uniapp之通用选择器@change事件

455 阅读1分钟

@change: 选中项改变时触发

案例:

<view style="background-color: #ffff;">
	<uni-grid :column="3" :show-border="false" :square="false" @change="change" >
		<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
			<view class="inline content">
                            <view class="iconImg">
                                <image :src="item.src" class="imgs"></image>
                            </view>
                            <view class="icon-title">{{item.title}}</view>
			</view>
		</uni-grid-item>
	</uni-grid>
</view>
<view style="background-color: #ffff;">
	<uni-grid :column="3" :show-border="false" :square="false" @change="listsChange" >
		<uni-grid-item v-for="(item ,index) in lists" :index="index" :key="index">
			<view class="inline content">
				<view class="iconImg">
					<image :src="item.src" class="imgs"></image>
				</view>
				<view class="icon-title">{{item.title}}</view></view>
		</uni-grid-item>
	</uni-grid>
</view>
methods: {
	change(e){
		console.log("e",e);
		if(e.detail.index=='0'){
			uni.navigateTo({
				url:'/pages/drugs/drugManage',
				fail: (err) => {
					console.log("err",err);
				}
			})
		}else if(e.detail.index=='1'){
			uni.navigateTo({
				url:'/pages/disease/diseaseManage',
				fail: (err) => {
					console.log("err",err);
				}
			})
		}else if(e.detail.index=='2'){
			uni.navigateTo({
				url:'/pages/treatment/treatmentManage',
				fail: (err) => {
					console.log("err",err);
				}
			})
		}
	},
        listsChange(e){
		console.log("e",e);
		if(e.detail.index=='0'){
			uni.navigateTo({
				url:'/pages/clinicals/clinicalManage',
				fail: (err) => {
					console.log("err",err);
				}
			})
		}else if(e.detail.index=='1'){
			uni.navigateTo({
				url:'/pages/antiepidemics/antiepidemicManage',
				fail: (err) => {
					console.log("err",err);
				}
			})
		}
        }
}