微信小程序wx:if的配合block的使用，点击箭头有折叠效果---三元表达式

我们可以先看一下效果图

点击箭头会出现隐藏的内容

再次点击我们将其收起来，我的想法是通过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}}'

<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,

})
},

关于图片的三则运算

这样实现了基本的切换