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

最新推荐文章于 2023-10-12 20:25:39 发布
最新推荐文章于 2023-10-12 20:25:39 发布
阅读量1.7k 收藏 2
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44170622/article/details/107170859
版权

我们可以先看一下效果图
在这里插入图片描述
点击箭头会出现隐藏的内容
在这里插入图片描述
再次点击我们将其收起来，我的想法是通过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,
     
    })
  },

关于图片的三则运算
在这里插入图片描述
这样实现了基本的切换

Specialize in Linxu
关注
专栏目录
微信小程序wx:for和wx:for-item的用法详解
08-27
主要介绍了微信小程序wx:for和wx:for-item的正确用法,wx:for是循环数组，wx:for-item即给列表赋别名,文中给大家列出来几个错误用法，大家一起学习下
【微信小程序】利用动态计算元素高度，实现点击展开或收起功能
乔的博客
07-05 3227
一、前言 项目详情页主要内容需要实现点击展开或收起功能，由于这些内容是后端返回的数据，字数有长右短，那么就要根据文字填充到元素内后的自适应高度去判断是否显示点击展开功能。 如图所示：点击下拉箭头，展示更多内容。再点击就收起。有一个小bug还未解决：就是下拉箭头的角度改变。下拉后应该变为向上箭头的。。 wxml： <!-- 通过事件响应动态改变数值，进而改变view组件的宽高样式。 --&gt...
wx:if和block wx:if
张火火
03-05 5089
wx:if在MINA中，我们用wx:if="{{condition}}"来判断是否需要渲染该代码块：&lt;view wx:if="{{condition}}"&gt; True &lt;/view&gt;也可以用wx:elif和wx:else来添加一个else块：?123&lt;view wx:if="{{length &gt; 5}}"&gt; 1 &lt;/view&gt
【微信小程序入门到精通】— 条件渲染实现方式
热爱生活，积极向上的阿酱！
10-21 1万+
本篇文章我将带大家学习一下条件渲染相关知识点，接下来我将结合例子来讲解！如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！，通过判断为 true 之后就会展示该组件，否则就不显示。我们可以看到 wx：if 其实就是用于微信小程序中的条件结构，那么既然有 if ，那么咋可能少得了 else 和 elif。
【微信小程序】基础篇 -- WXML 模板语法 - 条件渲染 -- wx:if & hidden （十一）
JMFive的博客
02-27 5943
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第11篇文章;今天开始学习微信小程序的第七天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序中block的使用
weixin_43915587的博客
02-26 5758
微信小程序中，block不是一个组件，而是一个包装元素，不会在页面中做任何渲染。 使用情况：条件渲染 wx:if 因为 wx:if 是一个控制属性，需要将它添加到一个标签/组件上，用于控制隐藏与显示。而如果需要一次性控制多个组件的隐藏与显示，一个一个添加wx:if过于繁琐，此时就可以使用block将这些组件包裹起来，对block设置wx:if控制属性 &lt;block wx:if=""&gt...
微信小程序wx:for的使用，动态传参
03-29
一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js文件，提供对外暴露的接口，然后读取本地数据，这些在上一篇博客中有详细介绍。我们最后说到写好的本地数据可以另一个页面读取：   ...
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
10-15
主要介绍了微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序（三）
JUSNYA的博客
10-06 1159
WXSS (WeiXin Style Sheets)是一套样式语言， 用于美化WXML的组件样式，类似于网1.什么是样式导入使用WXSS提供的@import语法，可以导入外联的样式表。页开发中的CSS。
【小程序教程】微信小程序之条件渲染
最新发布
shenchengyv的博客
10-12 1611
微信小程序条件渲染在微信小程序中，条件渲染是一种非常实用的技术，它允许我们根据条件来决定是否显示某个组件或页面。通过条件渲染，我们可以动态地呈现用户界面，根据用户的输入、数据或其他条件来做出相应的调整。
微信小程序-block标签的使用及if标签
csvbdd的博客
04-30 646
移动端block v-if语句
weixin_42594143的博客
03-02 340
不是一个组件,仅仅是一个包装元素，只接受控制属性,不会在页面中做任何渲染
微信小程序 block控制渲染
u014068781的专栏
04-10 2070
1、条件渲染 block wx:if          因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个  标签将多个组件包装起来，并在上边使用 wx:if 控制属性。 view1 view2 注意：  并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 2、列表渲染 block wx
block wx:if
linhui03的博客
11-20 662
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，我们可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。   view1   view2
微信小程序
weixin_51008360的博客
07-18 152
下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上。
微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明
m0_63622279的博客
07-12 4309
当condition条件为true时，代码块渲染显示，为false时，代码块不进行渲染.可以结合 wx:elif=“{{condition}}” 和 wx:else来进行判断 1.2. block标记 可以使用block标记，一次性的控制多个组件的显示与隐藏，block标记本身并不进行渲染。 block并不是一个组件，它只是一个包裹性质的容器，不会再页面做任何渲染。从下面的例子来观察下，渲染出的页面结构有何特点： block标签未曾渲染，只是充当一个包裹性质的容器学过前端三剑客的应该看到这个属性就明白了，h
微信小程序中 <view> 标签与 <block> 标签的区别
热门推荐
纠缠AI的亮子
05-26 4万+
两者的区别是，&lt;view&gt; 是一个组件，会在页面上做渲染；&lt;block&gt;不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。下面是两个&lt;block&gt;使用的例子：wx:if&lt;block wx:if="{{true}}"&gt; &lt;view&gt; text &lt;/view&gt; &lt;view
小程序wx:if block包装属性
weixin_44671184的博客
04-06 151
条件渲染 包装属性 black
小程序学习笔记02（零基础玩转小程序）--block占位符，条件渲染，小程序事件绑定、模板、样式中的calc，样式导入，选择器，使用less框架
weixin_43745804的博客
11-14 611
1、block占位符 渲染是会被小程序开发工具移除掉 2、条件渲染 wx：if="{{true/false}}" wx：if wx：elif wx：else <view> <view wx:if="{{true}}">值为真时显示</view> <view wx:if="{{false}}">值为假时显示</view> <view wx:if="{{false}}">1</view> <view wx
微信小程序wx:for动态传参与数组遍历实践
在微信小程序开发中，"wx:for"指令是一个关键组件，用于在前端页面中动态渲染数组或对象的数据。该指令通常用在WXML模板文件中，通过与data对象中的变量绑定，实现数据的遍历和展示。例如，如下的代码片段展示了如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值