微信小程序|下拉菜單

問題描述

下拉菜單的運用：

下拉菜單在各種網頁，app或者小程序中都是比較常見的輸入控件。下拉菜單的下拉選項的多少能夠根據自身需求進行調節，常運用於時間範圍選擇，地點區域選擇，價格區間選擇，等等。提供下拉菜單的目的是幫助用戶更快更準確的選擇相關條件。下拉菜單的運用能夠簡化頁面設計，節約空間，在必定程度上簡化設計。其缺點可能就是相比於單項選項卡還不夠直觀，用戶每次想要查看所選選項時都必須打開菜單對選項進行比較。

解決方案

基本框架：

微信小程序中是沒有html中的下拉標籤的,因此要實現下拉菜單功能就必須本身動手寫拉。在index.wxml文件中，咱們須要寫好下拉菜單的基礎框架，使用view建立下拉選擇的菜單，這裏建立三個菜單，須要注意的是要加上data-name屬性，用於下面實現選擇菜單後顯示在選擇框裏。分別經過bindtap給「請選擇」的view綁定bindShowMsg方法，給菜單的view綁定mySelect方法，用於在js中實現控制。其中bindtap就是點擊事件在.wxml文件綁定。

<viewclass='list-msg2'bindtap='bindShowMsg'>

上述代碼就是在一個組件的屬性上添加bindtap並賦予一個值(一個函數名)。當點擊該組件時, 會觸發相應的函數執行。在後臺.js文件中定義tapMessage函數.

index.wxml文件代碼以下：

<viewclass='list-msg'>     <viewclass='list-msg1'>         <text>選擇日期</text>     </view> <!--下拉框   -->     <viewclass='list-msg2'bindtap='bindShowMsg'>         <text>{{tihuoWay}}</text>         <imagestyle='height:20rpx;width:20rpx;'src='/images/down.png'></image>     </view> <!-- 下拉須要顯示的列表 -->     <viewclass="select_box"wx:if="{{select}}">         <viewclass="select_one"bindtap="mySelect"data-name="近兩日">近兩日</view>         <viewclass="select_one"bindtap="mySelect"data-name="近一週">近一週</view>         <viewclass="select_one"bindtap="mySelect"data-name="所有記錄">所有記錄</view>     </view> </view>

樣式調整：

小程序裏的樣式設置與HTML基本相似，就不一一介紹了。這裏咱們就簡單介紹一下@keyframes規則。在index.wxss文件中咱們使用了以下代碼，其做用是實現下拉過分效果，使用@keyframes動畫實現菜單的漸變打開和關閉動畫。

@keyframesmyfirst {     from {         height:0rpx;     }     to {         height:210rpx;     } }

使用@keyframe實現下拉過分效果，以百分比來規定改變發生的時間，或者經過關鍵詞「from」 和 「to」，等價於 0% 和 100%。0% 是動畫的開始時間，100% 動畫的結束時間。

js方法：

在index.js頁面，編寫兩個方法，一個是bindShowMsg ()方法，另外一個是mySelect方法，用於實現當選擇了下拉的菜單後顯示菜單內容。代碼以下：

Page({   /* 頁面的初始數據    */   data: {     select: false,     tihuoWay: '近兩日'   },   /*生命週期函數--監聽頁面加載   */   onLoad: function (options) {   },   bindShowMsg() {     this.setData({       select: !this.data.select     })   },   mySelect(e) {     var name = e.currentTarget.dataset.name     this.setData({       tihuoWay: name,       select: false     })   },   /*用戶點擊右上角分享 */   onShareAppMessage: function () {   } })

編譯小程序，預覽小程序運行後的效果：

圖4.1 效果圖

END

---