最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

微信小程序基于picker实现级联菜单

来源:动视网 责编:小OO 时间:2020-11-27 22:01:02
文档

微信小程序基于picker实现级联菜单

本文实例为大家分享了微信小程序实现级联菜单的具体代码,供大家参考,具体内容如下:<;view >;<;picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}">;<;view class="picker">;品牌:{{brands[brandindex]}} <;/view>;<;/picker>;<;/view>;<;view >;<;picker bindchange="bindPickerChange1" value="{{index1}}" range="{{object}}">;<;<。
推荐度:
导读本文实例为大家分享了微信小程序实现级联菜单的具体代码,供大家参考,具体内容如下:<;view >;<;picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}">;<;view class="picker">;品牌:{{brands[brandindex]}} <;/view>;<;/picker>;<;/view>;<;view >;<;picker bindchange="bindPickerChange1" value="{{index1}}" range="{{object}}">;<;<。


本文实例为大家分享了微信小程序实现级联菜单的具体代码,供大家参考,具体内容如下

<view >
 <picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}">
 <view class="picker">
 品牌:{{brands[brandindex]}}
 </view>
 </picker>
</view>
 
<view >
 <picker bindchange="bindPickerChange1" value="{{index1}}" range="{{object}}">
 <view class="picker">
 配件类别:{{object[index1]}}
 </view>
 </picker>
</view>
data: {
 brands: [],
 objectArray: [
 {
 brand:"博世",
 id: 0,
 array: ["博世喷油器配件", "博世传感器", "杰克赛尔配件", "博世油泵配件", "博世共轨管配件","博世泵喷嘴"]
 },
 {
 brand: "德尔福",
 id: 1,
 array: ["德尔福喷油器配件", "德尔福传感器", "德尔福油泵", "德尔福共轨管配件", "德尔福滤清器", "德尔福电脑版ECU", "德尔福机油", "德尔福维修部件"]
 },
 {
 brand: "卡特",
 id: 2,
 array: ["卡特传感器", "卡特C7C9泵喷嘴","卡特共轨配件"]
 },
 {
 brand: "康明斯",
 id: 3,
 array: ["西康配件", "东风康明斯","福田康明斯"]
 }
 ],
 object:[],
 brandindex:0,
 index1:0
 },
 onLoad:function(){
 var objectArray = this.data.objectArray
 var brands=[]
 for (var i = 0; i < objectArray.length;i++){
 brands.push(objectArray[i].brand,) 
 }
 this.setData({ brands: brands ,object: objectArray[this.data.brandindex].array})
 },
 bindPickerChange0: function (e) {
 this.setData({ brandindex: e.detail.value, index1:0 })
 var objectArray = this.data.objectArray
 this.setData({ object: objectArray[this.data.brandindex].array})
 },
 bindPickerChange1: function (e) {
 this.setData({
 index1: e.detail.value
 })
 },

效果图:

文档

微信小程序基于picker实现级联菜单

本文实例为大家分享了微信小程序实现级联菜单的具体代码,供大家参考,具体内容如下:<;view >;<;picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}">;<;view class="picker">;品牌:{{brands[brandindex]}} <;/view>;<;/picker>;<;/view>;<;view >;<;picker bindchange="bindPickerChange1" value="{{index1}}" range="{{object}}">;<;<。
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top