微信小程序动态数据渲染

微信小程序在.js后缀文件下有data实例对象，里面存放你用到的数据,在实际开发中此data下的数据多数是网络请求到的，而我这里先写一些假数据，方便演示

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    time:"2019-05-01",
    footprint:[
      {
        "id": 1,
        "title": "企业贷款",
        "subtitle": null,
        "coverImage": null,
        "insertTime": "2019-05-01 11:11:11"
      },
      {
        "id": 2,
        "title": "二手车分期",
        "subtitle": "业务办理-在线咨询",
        "coverImage": "http://xxx.jpg",
        "insertTime": "2019-05-01 11:11:11"
      },
   
    ],
    active:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({ title: '我的足迹' });

  }
})

=================
在微信小程序中无论是属性插值，还是文本内容插值全部是{{ }}，接下来我们把data里面的值插入页面中，因为data. footprint数组数据不止一条，所以此处wx:for="{{ footprint}}"遍历下, 被遍历过的里面子元素{{ }}插值默认要加item，例如{{item.title}}不要问我为什么，官方就是这样规定的

wxml：

<scroll-view scroll-y="{{true}}" class="scroll-list">
    <text class="date">{{time}}</text>
        <view class="list-box b-line"  wx:for="{{footprint}}" data-index="{{index}}" wx:item="item" wx:key>
            <view class="list-item" data-index="{{index}}" >
                <view class="content">
                    <image src="" class="coverImage"/>
                    <div class="inner">
                        <text class="title">{{item.title}}</text>
                        <text class="subtitle">{{item.subtitle}}</text>
                    </div>
                </view>
                <image src="./../../images/my/delete.png" class="del"  data-index="{{index}}"/>
            </view>
        </view>
</scroll-view>

wxss:

.scroll-list{
    height: 100%;
}
.date{
    font-size:14px;
    color: #eee;
}
.list-box{
    width: 100%;
    padding: 0;
}
.list-item{
    height: 150rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s;
}
.list-item .content{
    width: 80%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.list-item .content .coverImage{
    display: block;
    width: 150rpx;
    height: 150rpx;
    background: #eeeeee;
    float: left;
}
.list-item .content .inner{
    float: left;
    padding-left:25rpx;
}
.list-item .del{
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right:20rpx;
    bottom:20rpx;
}

之所以说是动态渲染数据，那么它的动态又体现在哪里呢？this.setData({})方法可以重定义data下数据，这样就实现了数据的动态更改
附效果图一张：

因为图片数据都是存在后台服务器，这里图片假数据我就没有处理，写了个样式进行占位，实际开发中补上即可，本章完，相信细心的同学已经看到右下角的小叉号了，那么如何逐条删除足迹呢？关注我，在我的文章中搜索微信小程序list列表删除功能 ~免费小红心记得走一走哦