微信小程序功能——展开和收起查看

效果图

这里我是控制只显示2个数组

1.wxml

在{{!showMore? ‘hiddenmore’ : ‘showmore’}}中，如果showMore为false,则hiddenmore下的more-item列表都不显示

// WXML
<view class="wrong-rate"><view class="wr-title">本班错题知识点汇总</view><view class="{{!showMore? 'hiddenmore' : 'showmore'}}"><view wx:for="{{rankList}}" wx:for-item="item" wx:for-index="idx" wx:key="" class="wr-list {{idx>1 ? 'more-item' : ''}}"><view>知识点1错误率({{item.percentage0}}%),共{{item.amount}}人</view><view>其中:概念题错误率({{item.percentage1}}%)</view><view>其中:基础题错误率({{item.percentage2}}%)</view><view>其中:综合题错误率({{item.percentage3}}%)</view></view></view><block wx:if="{{rankList.length>2}}"><view wx:if="{{showMore}}" class='' bindtap='listToggle'><image style='width:38rpx;height:31rpx;transform:rotate(180deg);' src="/static/images/down1.png"></image></view><view wx:else class='' bindtap='listToggle'><image style='width:38rpx;height:31rpx;' src="/static/images/down1.png"></image></view></block>
</view>

2.WXSS

// WXSS
.wrong-rate {text-align: center;
}.wr-title {margin-bottom: 20rpx;
}.wr-list {font-size: 30rpx;line-height: 50rpx;margin-bottom: 20rpx;
}.hiddenmore .more-item {display: none;
}

3.JS

通过点击事件重置showMore的值传递到视图层

// JS
data{showMore: false,rankList: [{amount:9.37,percentage0:30,percentage1: 30,percentage2: 30,percentage3: 30},{amount: 9.38,percentage0: 10,percentage1: 10,percentage2: 10,percentage3: 10},{amount: 9.39,percentage0: 20,percentage1: 20,percentage2: 30,percentage3: 30},],//这里面的数据是我写死的数据，应该要通过请求获取的
},
listToggle: function () {this.setData({showMore: !this.data.showMore})
},

微信小程序功能——展开和收起查看相关推荐

微信小程序优惠劵功能（包含用户需求，axure原型设计，数据库设计，后台功能，微信小程序功能）
1.用户需求优惠券功能有: 1.后台可以设置优惠券和查看已发出优惠券的状态 2.平台自动给新用户发放优惠劵,或者手动给某些用户发放优惠券 3.用户在小程序中手动领取优惠券 4.用户中心新增" ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
青提WiFi微信小程序功能介绍解析及其运营常见问题
这个文章用来介绍最新很火的一个微信小程序,青提,本人演示的为本人购买的和搭建的- 案例:大雄wifi 后台功能介绍五个大模块可以设置轮播图可以设置下方的小程序连接和其他可以设置广告内容可以设 ...
vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能
微信js-sdk官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 一.实现h5分享小卡片想 ...
使用DeviceOne实现微信小程序功能
微信小程序即将推出,还没推出就火的不行了.基于微信这个巨大平台,小程序必然能有巨大成功.不过它并不能完全取代App,该开发App还得开发.如果我们自己想实现一个基于自己的APP包含类似微信的小程序功能 ...
微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车
微信小程序–商品详情页面包含功能点: 商品收藏图片预览客服分享加入购物车跳转到购物车页面(注意:open-type="switchTab") 结构:goods_deta ...
微信小程序功能：全选和反选--修改商品数量、删除商品--计算总价格和总数量--收货地址
微信小程序–购物车页面(核心) 包含功能点: 全选和反选计算:总价格和总数量修改商品数量.删除商品收货地址结构:cart.wxml  <view c ...
微信小程序实现展开/收起的效果
(1)首先我们定义一下html结构: <view class="container"><view class="title"><t ...
微信小程序功能被封禁怎么办(附上解决方案)
1.首先要明确是被封禁还是警告,警告的话在规定时间内整改就可以恢复,走的是警告申诉通道,封禁的话走的是封禁申诉通道如果封禁了之后走警告申诉通过了申诉也是不给解封的,只能封禁走封禁申诉,警告走警告申诉 ...

微信小程序功能——展开和收起查看

效果图

1.wxml

2.WXSS

3.JS

微信小程序功能——展开和收起查看相关推荐

最新文章

热门文章