先看效果:
全部">
class="
coupon-list
">
for="
}" wx:key="
}" data-id="
}">
class="
item stamp stamp01
" data-id="
}" bindtap="
getcoupon
">
class="
float-li t1
">
class="
coupon-left
">
class="
t5">票
class="
t t1
">￥
class="
t t2
">}
class="
t t11
">原價
class="
t t21
">}
class="
float-li-rig
">
class="
coupon-rig
">
class="">
'}'class='
img'>
class="
title
"> }
class="
address
">}
class="
t3">
詳情wxss:
/*修改卡片樣式
*/.coupon-list
.coupon-list .item /*
畫卡片右邊圓點開始 */
.item:after 這是卡片兩邊都是鋸齒形，我這裡只要右邊是鋸齒形*/content: ''
; width: 0;
height:
100%;
/*絕對定位進行偏移
*/position: absolute;
top: 0;
}.item:before
.item:after /*
畫卡片右邊圓點結束
*/.coupon-list .item .float-li
.coupon-list .item .float-li-rig
.coupon-left
.coupon-left .t
.coupon-left .t1
.coupon-left .t2
.coupon-left .t3
.coupon-left .t4
.coupon-left .t5
.coupon-left .t11
.coupon-left .t21
.coupon-rig .t1
.coupon-rig .t3
.coupon-rig .t3 text
.coupon-rig .img
.coupon-rig .title
.note
.coupon-rig .address
.note
.stamp
.stamp i
.stamp01
.stamp02
.stamp03
.stamp04
.stamp05
.stamp05
小程式列表效能優化
我們的功能裡面有個滾動到底部載入的功能，優化前我們的做法是這樣的 1 初始乙個list，儲存列表資料 data startlist 2 監聽滾動事件，滾動到底部獲取新資料，並追加到list尾部,最後重新setdata onreachbottom this data fetchnewdata then...
小程式列表倒計時
適合拼團用的倒計時 通過後端傳過來的資料,前端進行處理轉換 js data getpink function then function res var pinkentitylist res.data.pinkentitylist 請求到的資料 var newpin 定義新陣列接受資料 var in...
微信小程式 列表頁下滑重新整理機制
在呼叫api時，要注意一點，如果要渲染乙個列表的話，如果直接返回所有項，既浪費時間又浪費資源，因為作為使用者來說，可能並不需要得到所有的列表項，可能在第一頁或者前幾頁就拿到自己想要的，所以，後台一般會將資料按頁面分組，前端在呼叫時傳入頁面值，即返回當前頁面列表項，並在下滑頁面時繼續載入下面的頁面，大...