当前位置:网站首页>小程序 - 超过两件折叠展开逻辑
小程序 - 超过两件折叠展开逻辑
2022-04-22 06:21:00 【推开世界的门】
需求背景:
小程序商品数据不是太多,所以无需分页,但是全部展示又太占位置。所以做一个超过两件进行展开折叠,用户自己
效果图
实现思路
前景: 超过两件,展示展开折叠图例。
点击图例,传数据,和标识进去。
如果 showAll == true ,表明要全部展示,直接将传入的数据返回
如果showAll == false , 表明只展示两件。循环传入数据,将其保存,并返回
index.wxs
var goodsList = function (list = [], showAll) {
if (showAll == false) {
var showList = [];
if (list.length > 2) {
for (var i = 0; i < 2; i++) {
showList.push(list[i]);
}
} else {
showList = list;
}
return showList;
} else {
return list;
}
};
module.exports = {
goodsList: goodsList,
};
在需要的地方引入即可
index.wxml
<wxs module="handlerShow" src="./index.wxs"></wxs>
<block wx:for="{
{handlerShow.goodsList(goodsList , showAll)}}" wx:key="index">
</block>
由于引入时,还没有数据,所以在形参里传入默认参数
版权声明
本文为[推开世界的门]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_38845858/article/details/124298611
边栏推荐
- Leetcode - 3 - (string addition, maximum number of consecutive 1 < Ⅰ Ⅲ >, maximum difficulty of the exam, deletion of the penultimate node of the linked list)
- Redis的设计与实现(2):如何处理过期键
- 跳转语句的三种
- E. Figure skiing (string sorting / check-in) (Game 5 of 2021 training League warm-up training competition)
- Redis的设计与实现(3):持久化策略RDB、AOF
- 【调用方法】
- 101012 paging
- Driver communication with R3 - custom package
- APC (III)
- 数组的定义格式
猜你喜欢

A. Alice and Bob (game? Thinking & Violence) (2021 Niuke summer multi school training camp 1)

Bidirectional circular linked list (see details)

1005 monopoly congruence solution (2021 Chinese college student programming competition CCPC network trial replay)

Kotlin 协程Flow、StateFlow、ShareFlow

Ffmpeg command (VIII). Add watermark to video

F. Find 3-friendly integers (2021 Niuke summer multi school training camp 1)

深入理解MySQL(5):详谈MySQL锁算法

Leetcode - 3 - (string addition, maximum number of consecutive 1 < Ⅰ Ⅲ >, maximum difficulty of the exam, deletion of the penultimate node of the linked list)

SQL注入(一)

Abstract classes and abstract methods
随机推荐
X64 Foundation (I)
Page properties
APC(四)
Kotlin flow realizes thread switching
Redis的设计与实现(5):主从复制策略和优化
案例案例案例
并发编程的艺术(4):浅谈wait/notify、park/unpark的使用和原理
1420 · minimum coverage substring II
On time complexity and space complexity
Final keyword
Internal class instructions (static, instance, local)
XSS vulnerability (I)
[calling method]
驱动与R3的通信
Longest ascending sequence
APC (I)
Redis的设计与实现(1):了解数据结构与对象
FFmpeg命令(六)、 視頻提取無音視頻
深入理解MySQL(7):MySQL如何调优
Could not resolve com.nbsp:library:1.8如何解决