您好,登錄后才能下訂單哦!
詳解微信小程序 通過控制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 ><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 () { } })
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。