這次是寫到了乙個類似卡包的頁面，分門店展示，沒個門店擁有的卡數不等。加了乙個收起和展開的功能收起時只展示第一張卡，展開時顯示所有的卡資訊
效果如圖
方法一wxml**很簡單
//迴圈門店因為每個收起展開需要獨立控制，我是在列表中將每個門店都追加了乙個show屬性控制收起與展開，} }
//門店中的卡
會員卡
會員卡號 }
收起狀態只取卡列表中的第一張卡，沒有採用控制view高度的方法
模擬資料如下
shoplist:[,,js中函式，請忽略它的名字...]},, ]
},],
copyshoplist:,
test(e))/**if(shoplists[tap].show))
}else)
}
},deepcopy(obj);
for (var key in
obj)
else}}
return
result;
},
* 生命週期函式--監聽頁面載入
*/onload: function (options) )
},
ok，這樣就完成了，從介面獲取資料時應該就用不到深拷貝了，可以省略一部分方法 二 不用js處理陣列直接wxml中加判斷條件
class="js中就只處理item.show的值就可以了section_wrap
">
class="
section_main
" wx:for="
}" wx:for-index="
i" wx:key="
index
">
class="
main_head
">
class="
main_head_left
">
class="
head_loc right_space
" src="
}/ding.png
">
class="
weight
">}
class="
main_head_right
" wx:if="
}" bindtap="
test
" data-index="
}">
class="
right_space show_more
">}
class="
arrow
" src="
}" animation="
}">
class="
main_card
" wx:for ="}"
wx:for-item = "
cell
" wx:if="
}" //給第二層迴圈的item賦值為cell 此處wx：if中的item是上一層迴圈中item item.show初始為false 初始狀態所有的列表都展示出來
wx:key="
index
" bindtap='
godetails
' data-card="
}">
class="
main_card_bg
" src="
}">
class="
main_card_con
" >
class="
card_con_left
">
class="
con_left_head
">會員卡
class="
con_left_bot
">會員卡號 }
class="
card_con_right
">
"}">
test(e) )兩種方法都可實現，第二種方法稍簡單一些},
jquery實現文章內容展開收縮
小蝸牛問媽媽 為什麼我們從生下來，就要揹負這個又硬又重的殼呢？媽媽 因為我們的身體沒有骨骼的支撐，只能爬，又爬不快。所以要這個殼的保護！小蝸牛 毛蟲姊姊沒有骨頭，也爬不快，為什麼她卻不用背這個又硬又重的殼呢？媽媽 因為毛蟲姊姊能變成蝴蝶，天空會保護她啊。小蝸牛 可是蚯蚓弟弟也沒骨頭爬不快，也不會變成...
JS實現段落的收縮與展開
主要是使用 webkit line clamp這個屬性進行限制顯示行數,通過計算文字在標籤內的顯示高度來計算當前文字行數,再與需要限制的行數進行對比,來確定是否顯示 如下 html class ui tab id info manager content class info shrink text...
vuejs實現摺疊面板展開收縮動畫
vuejs通過css3實現元素固定高度到auto高度的動畫和auto高度到固定高度的動畫。迴圈列表，html 在css上加上動畫transition newslist ul li p重點是下面js的實現 分為兩種情況 一 初始狀態是收縮時 二 初始狀態是展開時 稍微改動 var height lic...