微信公众号开发

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

本文主要是介绍入坑微信小程序必经之路（二） 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)
     })
    },
   })
 },

　　

　

 

这篇关于入坑微信小程序必经之路（二） select组件（数据库读取）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航