入坑微信小程序必经之路(二) select组件(数据库读取)

上篇说到微信小程序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)
     })
    },
   })
 },

  

 

 

上一篇:脚本实现页面静态化


下一篇:storageclass PV PVC Pod