详解微信小程序 通过控制CSS实现view隐藏与显示


Posted in Javascript onMay 24, 2017

详解微信小程序 通过控制CSS实现view隐藏与显示

实现效果图:

详解微信小程序 通过控制CSS实现view隐藏与显示

视图代码,使用变量控制隐藏类名

<scroll-view scroll-y="true" >
 <view class="user_freeback"> 
<view class="txt">
 <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复。</text>
 </view>
 </view>
<view class="section weui-media-box weui-media-box_appmsg"> 
      <view class="section__title">希望回访:</view> 
      <view class='form-group'> 
     <checkbox-group bindchange="btn_cbback_tab">
     <label style="display: flex;" ><checkbox value="1" checked="checked"/> </label>
     </checkbox-group>
      </view>   
</view>
<view class="{{tipsshow}} section weui-media-box weui-media-box_appmsg"> 
      <view class="section__title">您的姓名:</view> 
      <view class='form-group'> 
         <input type="text" name="txtusername" placeholder="请输入您的姓名" />
      </view>   
</view>
 
<view class="{{tipsshow}} section weui-media-box weui-media-box_appmsg"> 
      <view class="section__title">您的邮箱:</view> 
      <view class='form-group'> 
         <input type="text" name="txtemail" placeholder="请输入您的邮箱" />
      </view>   
</view>
<view class="{{tipsshow}} section weui-media-box weui-media-box_appmsg"> 
      <view class="section__title">联系电话:</view> 
      <view class='form-group'> 
         <input type="text" name="txttel" placeholder="请输入您的联系电话" />
      </view>   
</view>
<view class="section weui-media-box weui-media-box_appmsg"> 
      <view class="section__title">您的主题:</view> 
      <view class='form-group'> 
         <input type="text" name="txttitle" placeholder="请输入您的您的主题" />
      </view>   
</view>
<view class="section weui-media-box weui-media-box_appmsg"> 
      <view class="section__title">咨询内容:</view> 
      <view class='form-group'> 
         <textarea auto-height name="txtcontent" placeholder="请输入您的咨询内容" />
      </view>   
</view>
 <view class="weui-msg__text-area">
 <button class="btns" formType="submit" size="default"> 我要咨询 </button> 
  </view> 

Page({
 /**
  * 页面的初始数据
  */
 data: {
  tipsshow:''
 },


 btn_cbback_tab: function (e) {


  if (e.detail.value!="")
   {
   this.setData({
    tipsshow: 'undis'
   })
   }
  else
   {
   this.setData({
    tipsshow: ''
   })


   }
 




 },
 onLoad: function (options) {
 
 },


 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },


 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },


 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },


 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 
 },


 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },


 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },


 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 },


 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },


 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
jquery Form轻松实现文件上传
May 24 #jQuery
微信小程序封装http访问网络库实例代码
May 24 #Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 #Javascript
微信小程序 生命周期函数详解
May 24 #Javascript
很棒的vue弹窗组件
May 24 #Javascript
详解Vue使用命令行搭建单页面应用
May 24 #Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 #Javascript
You might like
php实现的click captcha点击验证码类实例
2014/09/23 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
初识javascript 文档碎片
2010/07/13 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
JS实现密码框效果
2020/09/10 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python应用文件读取与登录注册功能
2019/09/23 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
计算机本科生自荐信
2013/10/15 职场文书
合同专员岗位职责
2013/12/18 职场文书
电气工程自动化求职信
2014/03/14 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript