wxml
<view class="demo-box">
<view class="title">今日菜单</view>
<view class="title">{{menu}}</view>
<picker-view value="{{value}}" indicator-style="height:50px;" bindchange="pickerviewChange">
<picker-view-column>
<view class="col" wx:for="{{soup}}" wx:key="s{{index}}">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="col" wx:for="{{maincourse}}" wx:key="m{{index}}">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="col" wx:for="{{dessert}}" wx:key="d{{index}}">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
wxss
picker-view{
width: 100%;
height: 300px;
}
.col{
line-height: 50px;
}
js
Page({
data: {
soup:["奶油蘑菇汤","罗宋汤","牛肉清汤","鸭血粉丝汤","酸辣汤"],
maincourse:["煎小牛肉卷","传统烤羊排","清煮三文鱼","酥炸里脊"],
dessert:["坚果冰淇淋","焦糖布丁","奶酪蛋糕","蓝莓啵啵"],
value:[1,1,1],
menu:[]
},
pickerviewChange:function(e){
let v=e.detail.value;
let menu=[];
menu.push(this.data.soup[v[0]]);
menu.push(this.data.maincourse[v[1]]);
menu.push(this.data.dessert[v[2]]);
this.setData({menu:menu});
},
}