你会实现一个微信小程序开关功能吗

简介: 你会实现一个微信小程序开关功能吗

wxml:


<view >
  <button  class="show" bindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>
 </view>
 <view class="hide{{showView?'show':''}}">
      <text class="text">我是被隐藏控件</text>
 </view>


wxss:


.hide{
 display: none;
}
.show{ 
 display: block;
}


js:


Page({
  data: {
    showView: true
  },
  onLoad: function (options) {
    showView: (options.showView == "true" ? true : false)
  }
  , onChangeShowState: function () {
    var that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  }
})


另一种方式:


wxml:


<image src="{{showView?'http://192.168.2.61/wap/rm/images/select.png':'http://192.168.2.61/wap/rm/images/selected.png'}}"  bindtap="onChangeShowState"></image>


js:


showView:true;
onChangeShowState: function () {
   var that = this;
   that.setData({
     showView: (!that.data.showView)
   })
 }



相关文章
|
18天前
|
小程序
微信小程序如何实现进入小程序自动连WiFi功能
微信小程序如何实现进入小程序自动连WiFi功能
|
1月前
|
小程序 API
点餐小程序实战教程09-订单功能开发
点餐小程序实战教程09-订单功能开发
|
1月前
|
小程序 开发工具 数据库
零基础开发小程序第三课-列表功能开发
零基础开发小程序第三课-列表功能开发
|
2月前
|
小程序 JavaScript
微信小程序图片预览功能?
微信小程序图片预览功能?
|
2月前
|
小程序 JavaScript Android开发
【经验分享】如何在支付宝小程序里玩转富文本功能
【经验分享】如何在支付宝小程序里玩转富文本功能
58 0
|
1月前
|
存储 小程序 开发工具
零基础开发小程序第四课-查看功能开发
零基础开发小程序第四课-查看功能开发
|
6天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
7 0
|
1月前
|
小程序 算法 数据可视化
点餐小程序实战教程07-点餐功能开发
点餐小程序实战教程07-点餐功能开发
|
1月前
|
小程序
TDesign电商小程序模板解析02-首页功能
TDesign电商小程序模板解析02-首页功能
|
2月前
|
JSON 小程序 安全
【经验分享】如何实现小程序日历范围选择功能
【经验分享】如何实现小程序日历范围选择功能
142 2