1、npm install mobile-select -D
2、import MobileSelect from 'mobile-select'
a、html
<a class="search-item"> <span id="province-tr">{{ provinceTxt}}</span> <i class="down-icon"></i> </a>
<a class="search-item">
<span id="city-tr">{{ cityTxt }}</span>
<i class="down-icon"></i>
</a>
b、js
var provinceSelect = new MobileSelect({ trigger: "#province-tr", //触发点击事件的dom节点的选择器 可以是id/class等
title: "选择省份",//空间的标题,通过setTitle()进行设置=》citySelect.setTitle('新标题')
triggerDisplayData: false, //设置触发控件的按钮的文本是否根据选项改变,默认是true随控件选择项改变,
position:[0,1],//初始化各个wheel选项选中的初始值,这个0,1是索引。通过locatePostion(1,0)设置,把第索引为1的wheel的选中项改成索引为0的值
connector: "",//当控件有多个选项时多个值默认以空格连接的,可以通过这个属性进行修改
ensureBtnText: "确认", //控件确认按钮的文本通过这个属性设置
cancelBtnText:"取消", //设置控件取消按钮的文本
ensureBtnColor: "#000", //设置控件确认按钮的文本颜色
cancelBtnColor: "#000", //设置控件取消按钮的文本颜色
titleColor: "#CCC",//设置控件title文本的颜色
titleBgColor: "#CCC",//设置控件title的背景颜色
textColor: "blue", //设置滚动选项的文本的颜色
bgColor: "#eee", //设置滚轮的背景颜色
maskOpacity: "0.5", //遮罩的透明度
keyMap: {//当后台传给我们的数据key和控件key不同时可以用这个属性设置映射
id: 'key',
value: 'name',
child: 'child'
},
wheels: [//设置控件的可选择数据,child内与外联动,多个并列不联动 { data: that.provinces } ],
transitionEnd:function(index, data){//每一次手势滑动选项后的回调函数
console.log(index)
console.log(data)
}, callback:function(indexArr, data){//选择完成后的回调 let strData = data.toString() that.lists = [] that.searchData.page = 1 that.searchData.province = strData that.provinceTxt = strData delete that.searchData.city that.getStoreList(that.url, that.searchData) if (strData) { that.allCitys.forEach((item, index) => { if (item.province == that.searchData.province) { this.citys = item.citys } }) } citySelect.updateWheel(0, this.citys)//拿到citySelect实例当数据改变后通过updateWhell进行选择数据更新。第一个代表第几个滚轮的索引,第二个参数是更新的数据 } }) var citySelect = new MobileSelect({ trigger: "#city-tr", title: "选择城市", triggerDisplayData: false, //是否设置按钮的值 wheels: [ { data: that.citys } ], callback:function(indexArr, data){ console.log(data) let strData = data.toString() that.lists = [] that.searchData.page = 1 console.log(strData) that.searchData.city = strData that.cityTxt = strData that.getStoreList(that.url, that.searchData) } })
其他方法:
citySelect.show() //唤起弹窗
citySelect.hide() //隐藏弹窗
citySelect.getValue() //获取citySelect选择的值
citySelect.updateWheels() //重新渲染全部wheel数据 仅含联动数据