微信小程序列表调用（包含WXS脚本实现截取）

wxs封装：

 

function mysub(str,start,length){

  // 起始位置

  var bengin =start || 0;

  // 长度

  var len=length||2;

  len=Math.min(len,2);

  // 判断字符串长度

  if(str.length<=len){

      return str;

  }

  // 函数截取

  var strNew=str.substring(bengin,len);

  return strNew+"...";

}

// 导入

module.exports.mysub=mysub;

页面引入：

 <!-- 引入wxs -->

  <wxs src="/utils/tools.wxs" module="tools"></wxs>

  <view class="list">

    <block wx:for="{{list}}" wx:key="goods_name">

   <view class="list_block">

     <image src="{{item.goods_img}}" class="list_img" />

      <view class="list_text">{{tools.mysub(item.goods_name,0,2)}}${{item.goods_price}}</view>

   </view>

  </block>

    </view>

wxss:

.list{

  width: 100%;

  height: 320rpx;

  /* background-color: red; */

  display: flex;

  justify-content: space-around;

  align-items: center;

  flex-wrap: wrap;

}

.list_block{

  width:180rpx;

  height: 150rpx;

    background-color: aqua;

    display: flex;

    justify-content:space-around;

    align-items: center;

    flex-direction: column;

    align-content: space-around;

}

.list_img{

  width: 80rpx;

  height: 80rpx;

}

.list_text{

  font-size: 30rpx;

}

调用接口：

let _this=this;

wx.request({

  url: 'http://www.day.com/index.php/goodsList', //仅为示例，并非真实的接口地址    

  method:"GET",

  success (res) {

    console.log(res.data.data)

    let list=res.data.data;

    // 渲染

    _this.setData({list})

  },

})