問題描述

在使用小程序的時候基本的頁面的一般都是很簡潔的，所以會有一些菜單來做簡單的詮釋說明，或者是提供一些選項。這些菜單的彈出方式一般是向上和向下，那么如何來設(shè)置這些上下拉的菜單呢？

解決方案

上下拉菜單在微信小程序中起提示、選項的功能，當(dāng)點擊它時會彈出屬于這個菜單的相應(yīng)選項。使用vant組件庫，將 dist 文件提前下載好然后保存到項目中。在小程序中調(diào)用組件庫，并在正確引用就可以實現(xiàn)了菜單功能了。

一、下拉菜單

(1)在 json 中調(diào)用 van-tab 組件。

"usingComponents": {

"van-dropdown-menu": "/dist/dropdown-menu/index",

"van-dropdown-item": "/dist/dropdown-item/index",
}

表 1 json代碼

(2)在 js 中對菜單進(jìn)行設(shè)置。

option：設(shè)置菜單內(nèi)容；

value：設(shè)置菜單內(nèi)容的排列順序。

Page({
data: {
option1: [
{ text: ' 白色； S', value: 0 },
{ text: ' 白色； M', value: 1 },
{ text: ' 白色； L', value: 2 }
],
value1: 0,
},
});

表 2 js代碼

( 3 ) 在 wxml 中實現(xiàn)。

A ctive-color 設(shè)置選中狀態(tài)顏色；

V alue設(shè)置排列順序；

O ption菜單內(nèi)容。

<van-dropdown-menu active-color="#ee0a24">

<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />

</van-dropdown-menu>

表 3 wxml代碼

圖 1 效果圖

二、上拉菜單

(1)在 json 中調(diào)用 van-tab 組件。

"usingComponents": {

"van-action-sheet": "/dist/action-sheet/index" 

}

表 4 json代碼

( 2 )在 js 中對菜單進(jìn)行設(shè)置。

name：設(shè)置菜單選項；

subname ： 設(shè)置副標(biāo)題；

color：設(shè)置顏色。

Page({
data: {
show: false,
actions: [
{
name: ' 選項 '
},
{
name: ' 選項 '
},
{
name: ' 選項 ',
subname: ' 副文本 ',
openType: 'share'
}
]
},
onClose() {
this.setData({ show: false });
},
onSelect(event) {
console.log(event.detail);
}
});

表 5 js代碼

( 3 ) 在 wxml 中實現(xiàn)。

<van-action-sheet>: 設(shè)置上來菜單；

bind:select="onSelect" ： 選中選項時觸發(fā)，禁用或加載狀態(tài)下不會觸發(fā)；

bind:close="onClose"  ： 關(guān)閉時觸發(fā)。

<van-action-sheet

show="{{ show }}"

actions="{{ actions }}"

bind:close="onClose"

bind:select="onSelect"
/>

表 6 wxml代碼

圖 2 效果圖

結(jié)語

設(shè)置上下拉菜單可以使小程序界面簡潔，在設(shè)置菜單的時候要注意對菜單內(nèi)容和排列順序設(shè)置正確。菜單跟其他的組件有一點點不同菜單一般是在 js 里面進(jìn)行配置，可以根據(jù)需要在 js 中對菜單進(jìn)行設(shè)置。菜單設(shè)置的標(biāo)簽有很多，需要理解記憶并運用。

到此這篇關(guān)于微信小程序中的上拉、下拉菜單功能的文章就介紹到這了,更多相關(guān)微信小程序上拉下拉菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論