wx小程序picker-view嵌入页面的滚动选择器

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});
  },
}