您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

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

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-04-18 11:39热度:

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


  1. <scroll-view scroll-y="true" >
  2. <view class="user_freeback">
  3. <view class="txt">
  4. <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复。</text>
  5. </view>
  6. </view>
  7. <view class="section weui-media-box weui-media-box_appmsg">
  8. <view class="section__title">希望回访:</view>
  9. <view class='form-group'>
  10. <checkbox-group bindchange="btn_cbback_tab">
  11. <label style="display: flex;" ><checkbox value="1" checked="checked"/> </label>
  12. </checkbox-group>
  13. </view>
  14. </view>
  15. <view class="{{tipsshow}} section weui-media-box weui-media-box_appmsg">
  16. <view class="section__title">您的姓名:</view>
  17. <view class='form-group'>
  18. <input type="text" name="txtusername" placeholder="请输入您的姓名" />
  19. </view>
  20. </view>
  21.  
  22. <view class="{{tipsshow}} section weui-media-box weui-media-box_appmsg">
  23. <view class="section__title">您的邮箱:</view>
  24. <view class='form-group'>
  25. <input type="text" name="txtemail" placeholder="请输入您的邮箱" />
  26. </view>
  27. </view>
  28. <view class="{{tipsshow}} section weui-media-box weui-media-box_appmsg">
  29. <view class="section__title">联系电话:</view>
  30. <view class='form-group'>
  31. <input type="text" name="txttel" placeholder="请输入您的联系电话" />
  32. </view>
  33. </view>
  34. <view class="section weui-media-box weui-media-box_appmsg">
  35. <view class="section__title">您的主题:</view>
  36. <view class='form-group'>
  37. <input type="text" name="txttitle" placeholder="请输入您的您的主题" />
  38. </view>
  39. </view>
  40. <view class="section weui-media-box weui-media-box_appmsg">
  41. <view class="section__title">咨询内容:</view>
  42. <view class='form-group'>
  43. <textarea auto-height name="txtcontent" placeholder="请输入您的咨询内容" />
  44. </view>
  45. </view>
  46. <view class="weui-msg__text-area">
  47. <button class="btns" formType="submit" size="default"> 我要咨询 </button>
  48. </view>
  49. Page({
  50. /**
  51. * 页面的初始数据
  52. */
  53. data: {
  54. tipsshow:''
  55. },
  56.  
  57.  
  58. btn_cbback_tab: function (e) {
  59.  
  60.  
  61. if (e.detail.value!="")
  62. {
  63. this.setData({
  64. tipsshow: 'undis'
  65. })
  66. }
  67. else
  68. {
  69. this.setData({
  70. tipsshow: ''
  71. })
  72.  
  73.  
  74. }
  75.  
  76.  
  77.  
  78.  
  79.  
  80. },
  81. onLoad: function (options) {
  82.  
  83. },
  84.  
  85.  
  86. /**
  87. * 生命周期函数--监听页面初次渲染完成
  88. */
  89. onReady: function () {
  90.  
  91. },
  92.  
  93.  
  94. /**
  95. * 生命周期函数--监听页面显示
  96. */
  97. onShow: function () {
  98.  
  99. },
  100.  
  101.  
  102. /**
  103. * 生命周期函数--监听页面隐藏
  104. */
  105. onHide: function () {
  106.  
  107. },
  108.  
  109.  
  110. /**
  111. * 生命周期函数--监听页面卸载
  112. */
  113. onUnload: function () {
  114.  
  115. },
  116.  
  117.  
  118. /**
  119. * 页面相关事件处理函数--监听用户下拉动作
  120. */
  121. onPullDownRefresh: function () {
  122.  
  123. },
  124.  
  125.  
  126. /**
  127. * 页面上拉触底事件的处理函数
  128. */
  129. onReachBottom: function () {
  130.  
  131. },
  132.  
  133.  
  134. /**
  135. * 用户点击右上角分享
  136. */
  137. onShareAppMessage: function () {
  138.  
  139. },
  140.  
  141.  
  142. /**
  143. * 页面上拉触底事件的处理函数
  144. */
  145. onReachBottom: function () {
  146.  
  147. },
  148.  
  149.  
  150. /**
  151. * 页面相关事件处理函数--监听用户下拉动作
  152. */
  153. onPullDownRefresh: function () {
  154.  
  155. }
  156. })