小程序模板網(wǎng)

微信小程序 通過控制CSS實現(xiàn)view隱藏與顯示

發(fā)布時間:2018-04-18 11:39 所屬欄目:小程序開發(fā)教程

視圖代碼,使用變量控制隱藏類名


  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">聯(lián)系電話:</view>
  30. <view class='form-group'>
  31. <input type="text" name="txttel" placeholder="請輸入您的聯(lián)系電話" />
  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">咨詢內(nèi)容:</view>
  42. <view class='form-group'>
  43. <textarea auto-height name="txtcontent" placeholder="請輸入您的咨詢內(nèi)容" />
  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. * 頁面的初始數(shù)據(jù)
  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. * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  88. */
  89. onReady: function () {
  90.  
  91. },
  92.  
  93.  
  94. /**
  95. * 生命周期函數(shù)--監(jiān)聽頁面顯示
  96. */
  97. onShow: function () {
  98.  
  99. },
  100.  
  101.  
  102. /**
  103. * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  104. */
  105. onHide: function () {
  106.  
  107. },
  108.  
  109.  
  110. /**
  111. * 生命周期函數(shù)--監(jiān)聽頁面卸載
  112. */
  113. onUnload: function () {
  114.  
  115. },
  116.  
  117.  
  118. /**
  119. * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
  120. */
  121. onPullDownRefresh: function () {
  122.  
  123. },
  124.  
  125.  
  126. /**
  127. * 頁面上拉觸底事件的處理函數(shù)
  128. */
  129. onReachBottom: function () {
  130.  
  131. },
  132.  
  133.  
  134. /**
  135. * 用戶點擊右上角分享
  136. */
  137. onShareAppMessage: function () {
  138.  
  139. },
  140.  
  141.  
  142. /**
  143. * 頁面上拉觸底事件的處理函數(shù)
  144. */
  145. onReachBottom: function () {
  146.  
  147. },
  148.  
  149.  
  150. /**
  151. * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
  152. */
  153. onPullDownRefresh: function () {
  154.  
  155. }
  156. })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23698.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢