上篇说到微信小程序select下拉组件的定义为死值
现在来说说怎么从数据库读取数据循环绑定到组件上
wxml
<view class="pro-section"> <text class="sect-title">规格:</text> <view class="weui-cell__bd"> <view class='list-msg2' bindtap='bindShowMsg1'> <text >{{Specs}}</text> </view> </view> </view>
<view class="select_box" wx:if="{{select1}}"> <block wx:for="{{dtSpecs}}" wx:key="{[index]}" class="item"> <view class="select_one" bindtap="mySelect1" data-id="{{item.Id}}" data-name="{{item.TypeName}}">{{item.TypeName}}</view> </block> </view>
wxss
.select_box { background-color:white; padding: 0 10rpx; float:left; margin-left:15%; width: 83%; top: 130rpx; z-index: 1; overflow: hidden; animation: myfirst 0.5s; } .select_one { height: 60rpx; line-height: 60rpx; border-bottom: 1px solid #ccc; }
js
data:{ select1:false, dtSpecs:[], Specs:'请选择类型', }, ---------------------- bindShowMsg1:function(){ this.setData({ select1:!this.data.select1 }) }, mySelect1(e) { var name = e.currentTarget.dataset.name; var id=e.currentTarget.dataset.id; this.setData({ Specs: name, select1: false, }) }, onl oad: function(){ var url=app.globalData.url+"MaterialTypeGetList"; wx.request({ url: url, method: 'POST', header: { 'content-type': 'application/json' }, success: res => { this.setData({ //第一个data为固定用法 dtSpecs: JSON.parse(res.data.d) }) }, }) },