微信小程序 - ListView2 - 动态数据

demo 地址: https://github.com/iotjin/Jh_weapp

效果图：

image.png

js 代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataArr: []
  },

  requestData: function() {

    wx.showLoading({
      title: '加载中',
    })

    wx.request({
      url: 'api地址',
      success: (res) => {
        wx.hideLoading();
        wx.stopPullDownRefresh();
        // console.log(res.data);
        this.setData({
          dataArr: res.data.data
        })
      },
      Error: (Error) => {
        wx.hideLoading();
        wx.stopPullDownRefresh();
        console.log(Error);
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    wx.setNavigationBarTitle({
      title: '动态数据'
    })

    this.requestData();

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

    this.requestData();

  },

})

json 代码：

{
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "usingComponents": {}
}

wxml 代码：

<view class="cell-bg" wx:for="{{dataArr}}" wx:key="index">

  <view class="left-view">
    <image class="img" src="https://img.yzcdn.cn/vant/cat.jpeg"> </image>
  </view>

  <view class="right-view">
    <view class="name">{{item.name2}}</view>
    <view class="content">{{item.content}}</view>
  </view>

</view>

wxss 代码：

.cell-bg {
  display: flex;
  width: 100%;
  /* height: 140rpx; */
  background-color: white;
  border-bottom: 1px solid rgb(230, 230, 230);
}

.left-view {
  /* background-color: blue; */
  width: 140rpx;
  /* 子控件 水平居中 */
  text-align: center;
  /* 子控件垂直居中 */
  line-height: 140rpx;
}

.img {
  width: 100rpx;
  height: 100rpx;
  vertical-align: middle;
}

.right-view {
  /* background-color: red; */
  flex: 1;
}

.name {
  margin-top: 20rpx;
  margin-left: 15rpx;
  font-size: 35rpx;
}

.content {
  margin-top: 15rpx;
  margin-left: 15rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  color: gray;
  font-size: 30rpx;

}