详解微信小程序 通过控制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 相关文章推荐
jQuery中slideUp()方法用法分析
Dec 24 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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 检查电子邮件函数(自写)
2014/01/16 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
jquery实现加载等待效果示例
2013/09/25 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
PyMongo安装使用笔记
2015/04/27 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python set内置函数的具体使用
2019/07/02 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
数学教师个人工作总结
2015/02/06 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android