小程式 列表超出範圍可展開收起功能

由於設計專案的頁面，乙個列表裡面文字太過於長，也影響頁面美觀，所以不少軟體都有展開收起這個小功能。

1.文字超出設定行數後隱藏，然後顯示省略號...

2.可點選展開看隱藏的文字內容，也可以收起。

如圖：wxml

<

scroll-view 
class
='page'
>
<
view 
class
='list' 
wx:for
='}' 
wx:key
="index"
>
<
view 
class
="user-content-view }"
>
<
text 
class
="user-content"
>}
text
>
view
>
<
view 
bindtap
="change"
class
="state"
data-index
="}"
>}
view
>
view
>
scroll-view
>

.page

/* 列表 */
.list
.user-content-view
.user-content
/* 展開 收起 */
.state
.hide
.show 

我把展開收起的狀態放到陣列裡面，按道路可以不用放在陣列裡面的，這樣不靈活使用。

//

pages/circlefriends/circlefriends.js
varthat
page(,
],},
//展開  收起
change: function
(e) )
},})

小程式列表效能優化

我們的功能裡面有個滾動到底部載入的功能，優化前我們的做法是這樣的 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...

微信小程式 列表渲染wx for

在元件上使用wx for控制屬性繫結乙個陣列，即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為index，陣列當前項的變數名預設為item view wx for view page 使用wx for item可以指定陣列當前元素的變數名，使用wx for index可以指...