微信小程序wx:if的配合block的使用,点击箭头有折叠效果---三元表达式
2020-07-06 23:46
495 查看
我们可以先看一下效果图
点击箭头会出现隐藏的内容
再次点击我们将其收起来,我的想法是通过wx:if写两个block,然后通过wx:if的布尔值来实现这样的功能
下面我们首先写两个块级元素
<block wx:if='{{collapse==true?flase:true}}'> <view class="introduce">简介:十六路咖啡公司总部位于厦门市,截至2019年底,直营门店数达到4507家。十六路咖啡以“从咖啡开始,让十六路成为人们日常生活的一部分”为愿景,通过充分利用移动互联网和大数据技术的新零售模式,与各领域优质供应商深度合作,致力为客户提供高品质、高性价比、高便利性的产品。瑞幸咖啡的咖啡豆连续两年在IIAC国际咖啡品鉴大赛斩获金奖。</view> <view class="discount"> <view class="discontent"> <view class="item"> 9.8折</view> <view class="item">满98减5元</view> <view class="item">满128减5元</view> <view class="item">满198减15元</view> <view class="down"> <image bindtap="iscollapse" src="/pages/image/down.png"></image> </view> </view> </view> </block> <block ***wx:if='{{collapse==true?true:flase}}'***> <view class="zhankai">简介:十六路咖啡公司总部位于厦门市,截至2019年底,直营门店数达到4507家。十六路咖啡以“从咖啡开始,让十六路成为人们日常生活的一部分”为愿景,通过充分利用移动互联网和大数据技术的新零售模式,与各领域优质供应商深度合作,致力为客户提供高品质、高性价比、高便利性的产品。瑞幸咖啡的咖啡豆连续两年在IIAC国际咖啡品鉴大赛斩获金奖。</view> <view class="dazhe"> <view class="count">折</view> <view class="count_content">满100打9.7折</view> </view> <view class="dazhe2"> <view class="count2">减</view> <view class="count_content2"><text>满98减5;</text><text>满128减8;</text><text>满198减15</text></view> </view> <view class="bottom"> <view class="up"> <image bindtap="iscollapse" src="/pages/image/updown.png"></image> </view> </view> </block> </view>
我们在我们的图片上用bindtap点击事件,来写js事件
下面我们就来看看如何实现的
*/ data: { collapse:true }, iscollapse(){ const collapse=this.data.collapse; if(collapse){ this.setData({ collapse:false }) } else{ this.setData({ collapse:true }) } },
通过if-else取到布尔值,然后通过this,setData将局部变量赋值为全局变量
我们在wx:if使用
wx:if='{{collapse==true?true:flase}}'便显得格外重要,突然发现三元表达式还是挺好用的
下面附上页面所有的代码
1:wxml
<view class="top"> <image src="/pages/image/adv.png"> </image> </view> <view class="log"> <image src="/pages/image/logo.png"> </image> </view> <view class="details"> <view class="bussiness_title"> <view class="title"> <text>十六路咖啡(创新大道店…</text> </view> <text class="adress"><text class="shangquan">之心城商圈</text></text> </view> <!-- 默认显示 --> <block wx:if='{{collapse==true?flase:true}}'> <view class="introduce">简介:十六路咖啡公司总部位于厦门市,截至2019年底,直营门店数达到4507家。十六路咖啡以“从咖啡开始,让十六路成为人们日常生活的一部分”为愿景,通过充分利用移动互联网和大数据技术的新零售模式,与各领域优质供应商深度合作,致力为客户提供高品质、高性价比、高便利性的产品。瑞幸咖啡的咖啡豆连续两年在IIAC国际咖啡品鉴大赛斩获金奖。</view> <view class="discount"> <view class="discontent"> <view class="item"> 9.8折</view> <view class="item">满98减5元</view> <view class="item">满128减5元</view> <view class="item">满198减15元</view> <view class="down"> <image bindtap="iscollapse" src="/pages/image/down.png"></image> </view> </view> </view> </block> <block wx:if='{{collapse==true?true:flase}}'> <view class="zhankai">简介:十六路咖啡公司总部位于厦门市,截至2019年底,直营门店数达到4507家。十六路咖啡以“从咖啡开始,让十六路成为人们日常生活的一部分”为愿景,通过充分利用移动互联网和大数据技术的新零售模式,与各领域优质供应商深度合作,致力为客户提供高品质、高性价比、高便利性的产品。瑞幸咖啡的咖啡豆连续两年在IIAC国际咖啡品鉴大赛斩获金奖。</view> <view class="dazhe"> <view class="count">折</view> <view class="count_content">满100打9.7折</view> </view> <view class="dazhe2"> <view class="count2">减</view> <view class="count_content2"><text>满98减5;</text><text>满128减8;</text><text>满198减15</text></view> </view> <view class="bottom"> <view class="up"> <image bindtap="iscollapse" src="/pages/image/updown.png"></image> </view> </view> </block> </view>
2:wxss
page{ background:rgba(245,245,245,1); } .top{ width: 750rpx; height: 420rpx; position: relative; } .top image{ width: 100%; height: 100%; } .log{ width: 160rpx; height: 160rpx; position: absolute; top: 340rpx; left:40rpx; } .log image{ width: 100%; height: 100%; } .details{ /* width: 750rpx; height: 398rpx; */ background:rgba(255,255,255,1); } .title{ width: 100%; height: 56rpx; line-height: 56rpx; font-size:40rpx; font-family:PingFangSC-Semibold,PingFang SC; font-weight:600; color:rgba(51,51,51,1); margin-top: 116rpx; } .bussiness_title { display: flex; flex-direction: row; padding: 0 40rpx; } .bussiness_title .adress{ background:rgba(255,255,255,1); border-radius:4rpx; border:1rpx solid rgba(65,162,243,1); margin-top: 123rpx; white-space:nowrap; padding: 0 12rpx; } .bussiness_title .adress .shangquan{ font-size:22rpx; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(65,162,243,1); line-height:30rpx; } .introduce{ width: 671rpx; height: 80rpx; display: inline-block; margin: 0rpx auto; font-size:28rpx; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(96,98,102,1); line-height:40rpx; text-overflow: ellipsis; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 36rpx; } .discount{ width: 750rpx; height: 42rpx; margin-top: 36rpx;display: inline-block; margin-bottom: 32rpx; } .discount .discontent{ display: flex;flex-direction: row; padding: 0 22rpx; } .discount .discontent .item{ margin-left: 16rpx; /* flex-grow: 1; */ font-size:22rpx; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(247,98,96,1); line-height:30rpx; white-space: normal; border-radius:4rpx; border:1rpx solid rgba(239,178,0,1); text-align: center; padding: 6rpx 12rpx; } .down{ /* flex-grow: 5; */ width: 19rpx; height: 12rpx; margin-left:70rpx; /* background-color: red; */ } .down image{ width: 100%; height: 100%; } .zhankai{ font-size:28rpx; padding: 36px 40rpx ; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(96,98,102,1); line-height:40rpx; } .dazhe{ width: 750rpx; height: 42rpx; padding: 0 40rpx; display: flex; flex-direction: row; } .dazhe .count{ width: 40rpx; height: 40rpx; background:rgba(239,178,0,1); border-radius:4px; font-size:24rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; line-height:40rpx; text-align: center; } .count_content{ font-size:30rpx; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(48,49,51,1); line-height:42rpx; margin-left: 16rpx; } .dazhe2{ width: 750rpx; height: 42rpx; padding: 0 40rpx; display: flex; flex-direction: row; padding-top:32rpx; } .dazhe2 .count2{ width:40rpx; height:40rpx; background:rgba(247,98,96,1); border-radius:4rpx; font-size:24rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:rgba(255,255,255,1); line-height:33rpx; text-align: center; } .dazhe2 .count_content2{ font-size:30rpx; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(48,49,51,1); line-height:42rpx; margin-left: 16rpx; } .bottom{ height: 112rpx; width: 750rpx; } .bottom .up{ width: 31rpx; height: 20rpx; margin: 50rpx; display: inline-block; margin-left: 360rpx; margin-bottom: 20rpx; } .up image{ width: 100%; height: 100%; }
js部分
Page({ /** * 页面的初始数据 */ data: { collapse:true }, iscollapse(){ const collapse=this.data.collapse; if(collapse){ this.setData({ collapse:false }) } else{ this.setData({ collapse:true }) } }, onLoad: function (options) { this.iscollapse(); } })
在实现label切换的时候,我们可以写两个事件名字,这样就不会相互影响,还能实线切换的功能
data: { collapse: false, yes: "/pages/image/unchecked.png", no: "/pages/image/singal.png" }, // 周期 daytime() { const collapse = this.data.collapse; this.setData({ collapse: false, }) }, activetime(){ const collapse = this.data.collapse; this.setData({ collapse: true, }) },
关于图片的三则运算
这样实现了基本的切换
相关文章推荐
- 微信小程序使用三元运算符代替wx:if
- 【微信小程序】详解wx:if elif else的用法(搭配view、block)
- 解决微信小程序wx:if使用不了函数,WXS使用方法以及防踩坑
- 微信小程序使用三元运算符代替wx:if
- 微信小程序之----wx:if elif else的用法(搭配view、block)
- 微信小程序学习笔记-2.1 wx.for 和 wx.if 的使用
- 微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用
- 微信小程序——wx.navigateTo点击后没反应
- 【微信小程序教程】——input正则表达式验证的使用
- 微信小程序 wx:for 点击事件
- 微信小程序的条件渲染和block的使用
- 微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列(10)
- 微信小程序在开发工具预览的圆角模糊效果在ios手机中不能使用
- 微信小程序block的使用教程
- 微信小程序系列十四:tab点击切换效果
- 微信小程序实现类似微信点击语音播放效果
- 微信小程序如何将本地图片文件上传到服务器?wx.chooseImage& wx.uploadFile方法使用案例以及微信小程序如何获取input框的值。
- 微信小程序的wx:for,wx:for-items,wx:for-item,wx:key等的关系及正确使用
- [转]微信小程序联盟 跳坑《一百八十一》设置API:wx.openSetting使用说明
- 微信小程序判断wx:if wx:for template