小程序之按钮点击之后，显示隐藏效果不好使！

最新推荐文章于 2024-08-28 13:51:38 发布
最新推荐文章于 2024-08-28 13:51:38 发布
阅读量3.5k 收藏 3
点赞数 1
分类专栏： 前端小程序 文章标签： 前端 小程序 bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shirleyqdd/article/details/79987007
版权

界面有一个botton，点击botton时，控制某些例如<view>显示隐藏。点击之后，没有切换显示隐藏的效果！

text.wxml代码


test.js代码

show方法中的代码


data中的bol的代码


界面效果！



修改以上代码：

由于，bol是在setData中，是取不到bol那个值，必须取到值之后，可以var 一个 bol的变量，在进行取反操作。

第二种办法，既可以写成蓝色边框的形式去进行取值！



Danile-丹丹
关注
专栏目录
微信小程序 - 最新实现高性能底部凸起 Tabbar 菜单功能，小程序自定义导航tabbar菜单中间悬浮一个按钮图标容器，强悍保证点击不闪烁、跳转闪屏、切换流畅不卡顿、媲美原生几乎没区别（完整代码）
王佳斌
08-16 5254
微信小程序，vue2，vue3，导航菜单，tabbar，自定义导航，中间凸起，突出悬浮，小程序自定义tabBar底部导航栏，自定义样式，设置中间凸出，中间图标凸出效果，tabbar凸起的显示，最好用的组件插件，解决问题，闪屏，跳转加载不流畅，非常卡，点击闪一下，微信小程序tabbar闪烁，自己写不用原生的，图标闪烁，图标文字，图片，微信小程序自定tabbar有没有接近原生的体验，初次点击出现闪屏，在第一次切换还是会闪一下，页面切换存在闪动，自定义tabBar首次点击闪烁问题，跳转页面图标闪动问题，多次闪回问
微信小程序自定义tabbar组件之中间按钮凸起
nan961136007的博客
01-10 1万+
和我前面一篇文章差不多的， 只不过逻辑有点不同，直接上效果和代码吧 先来一个模板文件，我的图片放在模板文件里 wxml <view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}"> <block wx:for="{...
小程序hidden无效
weixin_37710888的博客
07-24 3371
小程序的hidden属性只能隐藏块级元素； 隐藏元素的其他方法动态设置opacity,display,以及通过wx：if
小程序点击按钮显示隐藏
ma_hao99的博客
04-07 5393
wxml： <view > <button class="{{showView?'show':'hide'}}" bindtap="change">{{showView?'隐藏':'显示'}}</button> <button class="{{showView?'hide':'show'}}" bindtap="change">...
微信小程序添加按键功能
最新发布
lengxuemo的专栏
08-28 343
2.点开index.js文件，在page里面添加如下代码。1.首先点开index.wxml文件，添加如下代码。
微信小程序--隐藏button边框
weixin_44531304的博客
04-04 1700
想使用button自带的disable属性和效果，但又不需要button显示边框线 button控件有一条淡灰色的边框，在控件上了样式 border-radius: 0; 无法让button边框隐藏 代码如下： .tx-btn { z-index: 99; position: fixed; left: 0; bottom: 0; width: 100%; height: 1...
《小坑》微信小程序原生开发点击按钮切换显示隐藏无效
Leporc的博客
04-19 731
在尝试随便写一些简单的代码熟悉微信小程序的代码写法时，发现一个简单的点击按钮切换一个变量的值，然后根据这个值作为wx:if属性的值切换显示隐藏时，虽然变量的值改变了的但是页面并没有变化。 代码如下： <!--index.wxml--> <button bindtap="mess">点击</button> <block > <view class="dis" wx:if="{{dis}}"> 1111 </view>
微信小程序中使用template
XIAOYANG55555的博客
08-23 222
当我们的项目需要多次使用同一个布局和样式的时候，我们就可以考虑使用template（模块）来减少冗余的代码。 使用方法： 1. 新建一个template文件夹存放通用模板； 2. 在文件夹汇里面新建一个wxml，wxss，进行模版和样式的定义； 3. 设置模版的name，以及里面我们需要定义的wxml的内容； 4. 设置wxss样式； 5. 在需要使用的页面imp...
微信小程序自定义tabbar组件点击对应区域显示凸起效果
nan961136007的博客
01-09 3585
今天呢，看到设计图，难搞啊，要自定义组件，是时候动动脑子了，哈哈。 我呢，方法用的比较笨，代码有点冗余了，还望体谅哈 首先呢，先创建template文件夹，里面包含wxml，wcss和 js 先来wxml代码吧 <view class='footer'> <view class='footer_list' data-current="{{0}}" bindtap="ch...
移动端左右滑动出现和隐藏按钮（适合vue和小程序开发）
weixin_43716010的博客
10-26 2309
在日常开发中，会碰到许许多多的样式布局，有时候用ui框架并不是特别的符合项目的需求，所以有的时候还是要自己亲自动手来写，这是一个简单的，左右滑动可以显示和隐藏删除按钮的一个小demo，大家可以相互学习学习，如果哪里表达的不太好，欢迎大家来指正，或者有更好的实现方法也可以评论，希望大佬们多多提意见。 首先来看一下效果图 首先先和大家说一下我的思路，最后把代码放到后边供大家参考 第一：首先我们先想一下应该怎样布局，肯定这个删除按钮是存在的，然后用户从右向左滑动的时候我们把它显示出来，然后从左向..
微信小程序之分享页面如何返回首页的示例
08-27
在微信小程序的开发过程中，有时候我们需要确保用户在分享后的页面能方便地返回到首页。这个问题在描述中被提出，即用户通过分享链接进入小程序后，可能会迷失在各个子页面之间，难以找到返回首页的途径。微信官方...
显示隐藏文件小程序
09-10
此程序可以显示所在地的所有文件，包括隐藏文件件及文件
整理微信小程序控制view隐藏显示的五种方法
m0_74265396的博客
07-30 3602
在页面的js文件中通过修改hidden值来控制。和left属性值控制元素的显示与否。使元素脱离文档流，通过改变元素的。
小程序 显示隐藏
weixin_30457065的博客
11-26 832
刚刚开始接触小程序，发现是跟vue差不多的写法。但是又比vue少了很多功能，很不习惯 然后想做个显示隐藏的功能，找了网上大多数人都是： 建两个类： vshow:{ display : block } vhidden:{ display : none } 然后在wxml中是： <view class="{{ showView ? vshow : vihdden...
微信小程序控制元素显示隐藏
每天都想吃好吃的
10-28 1419
是一种轻量级的应用程序，它可以在微信中运行，具有快速、便捷、易用等特点。在微信小程序中，我们可以通过控制元素的显示和隐藏来实现特定的功能。本文将介绍如何使用微信小程序控制元素的显示和隐藏，以及如何应用这些技巧来开发更好的小程序。
小程序实现视图容器的隐藏和显示
qq_56107231的博客
03-30 210
wx：if，可以设置数字也可以是布尔值，通过js-data数据的改变实现不同试图容器的。才疏学浅，主要是发个文章记录学习过程。
实现小程序的显示和隐藏
乐乐呀的博客
08-29 3638
方式一：通过点击传参方式实现 将true和false通过deliverTip事件传递，切记data-del传入的是字符串，我们需要在方法中判断后，再给show赋值true或false，不可直接复制给show变量 方式二：点击采用不同事件，改变show值 方式三：通过wxss实现 将wx:if={{show}}改成class="{{show?‘del_box’:‘hide_box’}}"，以样式形式控制显示和隐藏 del_box:{display:block} hide_box:{display:n
微信小程序笔记(一)——点击显示或隐藏某一行数据
热门推荐
ABCGoods的博客
12-18 1万+
点击后隐藏或显示某一行数据。在小程序开发时，经常需要实现在点击完列表中的某一行数据后，就能展开其对应的相关内容或隐藏其对应的内容  index.wxml view class='text'> text>方法一text>view>view wx:for="{{list}}" wx:key="content" wx:for-index="key"> view class='titl
微信小程序左滑显示按钮Demo实现
微信小程序左滑显示按钮demo是一个基于微信小程序框架的交互式demo，展示了如何在小程序中实现左滑显示按钮的功能。本demo的结构主要包括三部分：视图层、逻辑层和样式层。 视图层：在视图层中，我们可以看到一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值