微信小程序11_获取服务端数据，展示为网格

要动态展示数据，首先在页面文件 定义每个条目的布局， 这里以newList.wxml作为网格显示页

 

<view class="cp_zuixin">
<block wx:for="{{cp_zuixinList}}">
  <navigator url='' class="cp_xiangmu">
    <image src='{{item.img}}' class="cp_tupian" mode="widthFix"></image>
    <text class="cp_mingcheng">{{item.title}}</text>
    </navigator>
  </block>
</view>

在newList.wxss页面，增加样式：

/**最新产品**/
.cp_zuixin{
  display: flex;
  flex-wrap: wrap;
}
.cp_xiangmu{
  width: 50%;
  padding:20px;
  box-sizing: border-box;
  display:flex;
  flex-direction: column;
}
.cp_tupian{
  width: 100%;
   height: 20%;
}
.cp_mingcheng{
  overflow: hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size: 14px;
  color:gray;
}

第三步， 在newList.js文件 中增加代码

在data:中增加 变量
cp_zuixinList: []

--------------------
在onLoad:中增加函数

  getProductList(){
    var that = this;
    wx.request({
      url: 'http://sys2.yaoyiwangluo.com/m/wx_api_CpList_top4.asp',
      success(res){
        that.setData({
          cp_zuixinList: res.data,
        })
      }
    })
  },

可实现效果，如下所示：