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

我们可以先看一下效果图

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

再次点击我们将其收起来，我的想法是通过wx:if写两个block，然后通过wx:if的布尔值来实现这样的功能
下面我们首先写两个块级元素

    简介：十六路咖啡公司总部位于厦门市，截至2019年底，直营门店数达到4507家。十六路咖啡以“从咖啡开始，让十六路成为人们日常生活的一部分”为愿景，通过充分利用移动互联网和大数据技术的新零售模式，与各领域优质供应商深度合作，致力为客户提供高品质、高性价比、高便利性的产品。瑞幸咖啡的咖啡豆连续两年在IIAC国际咖啡品鉴大赛斩获金奖。
    
      
         9.8折
        满98减5元
        满128减5元
        满198减15元
         
          
         
      
    
   
   
    简介：十六路咖啡公司总部位于厦门市，截至2019年底，直营门店数达到4507家。十六路咖啡以“从咖啡开始，让十六路成为人们日常生活的一部分”为愿景,通过充分利用移动互联网和大数据技术的新零售模式，与各领域优质供应商深度合作，致力为客户提供高品质、高性价比、高便利性的产品。瑞幸咖啡的咖啡豆连续两年在IIAC国际咖啡品鉴大赛斩获金奖。
    
       折
      满100打9.7折
    
     
       减
      满98减5；满128减8；满198减15
    
    
    
       
    
    
  
   

我们在我们的图片上用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

   


   


  
    
      十六路咖啡（创新大道店…
    
    之心城商圈
   
  
   
    简介：十六路咖啡公司总部位于厦门市，截至2019年底，直营门店数达到4507家。十六路咖啡以“从咖啡开始，让十六路成为人们日常生活的一部分”为愿景，通过充分利用移动互联网和大数据技术的新零售模式，与各领域优质供应商深度合作，致力为客户提供高品质、高性价比、高便利性的产品。瑞幸咖啡的咖啡豆连续两年在IIAC国际咖啡品鉴大赛斩获金奖。
    
      
         9.8折
        满98减5元
        满128减5元
        满198减15元
         
          
         
      
    
   
   
    简介：十六路咖啡公司总部位于厦门市，截至2019年底，直营门店数达到4507家。十六路咖啡以“从咖啡开始，让十六路成为人们日常生活的一部分”为愿景,通过充分利用移动互联网和大数据技术的新零售模式，与各领域优质供应商深度合作，致力为客户提供高品质、高性价比、高便利性的产品。瑞幸咖啡的咖啡豆连续两年在IIAC国际咖啡品鉴大赛斩获金奖。
    
       折
      满100打9.7折
    
     
       减
      满98减5；满128减8；满198减15
    
    
    
       
    
    
  
   

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

关于图片的三则运算

这样实现了基本的切换