微信小程序之列表。

常见的UI形式就是列表。iOS 有UITableView，安卓有ListView实现列表，那么今天我们就来学习一下微信小程序的列表怎么做。
废话不多说，直接上代码：
main.wxml:

<!-- 礼品列表 -->
<view class=\'giftListView\'>
 <block wx:for="{{items}}">
 <!-- 每个cell -->
  <view class=\'item\' wx:key="{{item.ID}}" bindtap=\'dunHuanAction\' data-item= "{{item}}" data-id="{{item.ID}}" >

  <!-- 产品图片 -->
   <view class=\'iconImageView\'>
    <image class=\'iconImage\' src="{{item.ProductPic?item.ProductPic:\'http://weixin.siyanli.net.cn/static/miniimg/zhanwei-01.png\'}}" mode = \'aspectFit\'></image>
   </view>

   <!-- 产品名称 -->
   <view class=\'productNameView\'>
    <text class=\'productNameText\'>{{item.ProductName}}</text>
   </view>

   <!-- 需要的积分 -->
   <view class=\'needScoreView\'>
    <text class=\'needSocreText\'>[{{item.Point}}积分]</text>
   </view>
   
   <!-- 具体产品 -->
   <view class=\'productDesView\'>
    <text class = \'productDesText\'>四件套</text>
   </view>
  
  <!-- 剩余数量 -->
  <!-- <view class=\'numView\'>
   <text class=\'numText\'>剩余{{item.SurplusNum}}份</text>
  </view> -->

  </view>
 </block>
</view>

其实很简单，giftListView相当于列表view，item就是我们app里所说的cell，而产品图片，产品名称，需要的积分，具体产品，这些都是每个cell里面所展示的内容。

每个控件的位置则需要在main.wxss里面设置。

/* 礼品列表 */
.giftListView {
  width: 100%;
  bottom: 0;
  top: 500rpx;
  /* background-color: red; */
  position: absolute;

}
/* cell */
.item {
  width: 100%;
  height: 300rpx;
  position: relative;
  /* background-color: green; */
    border-bottom: 1px solid #dadada;
 
}
/* cell 产品图 */
.iconImageView {
  width: 200rpx;
  height: 200rpx;
  top: 50rpx;
  left: 40rpx;
  /* background-color:orange; */
  position: absolute;
}
.iconImage {
  width: 200rpx;
  height: 200rpx;
}

/* 产品名 */
.productNameView {
  top: 50rpx;
  left: 280rpx;
  right: 130rpx;
  height: 50rpx;
  position: absolute;
}
.productNameText {
  color: rgb(32, 27, 27);
  font-size: 35rpx;
  white-space: nowrap;
    text-overflow:ellipsis;
}

/* 需要积分数 */
.needScoreView {
  top: 50rpx;
  right: 10rpx;
  height: 50rpx;
  width: 100rpx;
  position: absolute;
}
.needSocreText {
  color: rgb(230, 204, 140);
  font-size: 25rpx;
}

/* 具体产品 */
.productDesView {
  top: 120rpx;
  height: 50rpx;
  left: 280rpx;
  right: 20rpx;
  /* background-color: gray; */
  position: absolute;
}
.productDesText {
  font-size: 32rpx;
  color: gray;
  display: block;
  /* line-height: 50rpx; */
   overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
   /* -webkit-line-clamp:1;  */
}

/* 剩余数 */
/* .numView {
  top: 190rpx;
  height: 50rpx;
  left: 280rpx;
  right: 150rpx;
  position:absolute;
}
.numText {
  font-size: 25rpx;
  color: rgb(230, 204, 140);
   overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */

编译程序，可以看到如下界面

 

Snip20190425_3.png

对于列表的赋值，要在mian.js里面实现.
首先，要在data方法里面，定义一个空数组items。

 data: {
    huoDongimageUrl:\'http://weixin.siyanli.net.cn/static/miniimg/guize-01.png\',
    headImageUrl:\'\',      
    ruleDesImageUrl:\'\',
    ruleDesImageHidden:true,
    duiHuanPopViewHidden:true,
    items: [], // 数据列表
    points:\'\',//积分数
    activity:{},//头试图信息
    color:\'\',//立即兑换按钮颜色
    cell:{},//每个cell
    userInfo: {},
    hasUserInfo: false,
    //判断小程序的API，回调，参数，组件等是否在当前版本可用。
    canIUse: wx.canIUse(\'button.open-type.getUserInfo\')
  },

请求数据赋值，在success回调里面使用 this.setData赋值

onSuccess: function (res) { //onSuccess回调
    wx.hideLoading();
    console.log(res);

    if (res.stateCode != 100){
    
      console.log(res.message);
      this.show({
        iconToast: \'\', // 对：icon-dui, 错：icon-cuo,警告：icon-warning
        imageToast:\'\',
        textToast: res.message,
        duration:100,
      })
     if(res.stateCode == 110){
       wx.redirectTo({
         url: \'../phone/phone\',
       })
     }
    }else {
      this.setData({
        items: res.data.ActivityProduct, //请求结果数据
        activity: res.data.activity,
        points: res.data.Points
      })
    }
  
  },

效果如下：

 

屏幕快照 2019-04-25 下午12.06.29.png

作者：心情的蛊惑
链接：https://www.jianshu.com/p/3156dde1a18e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。