详解微信小程序 通过控制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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
vue中动态添加class类名的方法
Sep 05 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 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 ajax 分页类代码
2008/11/13 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python获取从命令行输入数字的方法
2015/04/29 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
基于python检查矩阵计算结果
2020/05/21 Python
python3 kubernetes api的使用示例
2021/01/12 Python
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
股权收购意向书
2014/04/01 职场文书
店面出租协议书范本
2014/11/28 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
教师远程培训心得体会
2016/01/09 职场文书
PHP新手指南
2021/04/01 PHP
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技