微信小程序在.js后綴文件下有data實(shí)例對(duì)象震贵，里面存放你用到的數(shù)據(jù),在實(shí)際開(kāi)發(fā)中此data下的數(shù)據(jù)多數(shù)是網(wǎng)絡(luò)請(qǐng)求到的，而我這里先寫(xiě)一些假數(shù)據(jù)，方便演示
js:
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
time:"2019-05-01",
footprint:[
{
"id": 1,
"title": "企業(yè)貸款",
"subtitle": null,
"coverImage": null,
"insertTime": "2019-05-01 11:11:11"
},
{
"id": 2,
"title": "二手車(chē)分期",
"subtitle": "業(yè)務(wù)辦理-在線咨詢(xún)",
"coverImage": "http://xxx.jpg",
"insertTime": "2019-05-01 11:11:11"
},
],
active:false,
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
wx.setNavigationBarTitle({ title: '我的足跡' });
}
})
=================
在微信小程序中無(wú)論是屬性插值艳馒，還是文本內(nèi)容插值全部是{{ }}，接下來(lái)我們把data里面的值插入頁(yè)面中员寇，因?yàn)閐ata. footprint數(shù)組數(shù)據(jù)不止一條弄慰，所以此處wx:for="{{ footprint}}"遍歷下, 被遍歷過(guò)的里面子元素{{ }}插值默認(rèn)要加item，例如{{item.title}}不要問(wèn)我為什么蝶锋，官方就是這樣規(guī)定的
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;
}
之所以說(shuō)是動(dòng)態(tài)渲染數(shù)據(jù)陆爽，那么它的動(dòng)態(tài)又體現(xiàn)在哪里呢？this.setData({})方法可以重定義data下數(shù)據(jù)扳缕，這樣就實(shí)現(xiàn)了數(shù)據(jù)的動(dòng)態(tài)更改
附效果圖一張：
因?yàn)閳D片數(shù)據(jù)都是存在后臺(tái)服務(wù)器慌闭，這里圖片假數(shù)據(jù)我就沒(méi)有處理，寫(xiě)了個(gè)樣式進(jìn)行占位躯舔，實(shí)際開(kāi)發(fā)中補(bǔ)上即可驴剔，本章完，相信細(xì)心的同學(xué)已經(jīng)看到右下角的小叉號(hào)了粥庄，那么如何逐條刪除足跡呢丧失？關(guān)注我，在我的文章中搜索微信小程序list列表刪除功能 ~免費(fèi)小紅心記得走一走哦
