問(wèn)題描述

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

解決方案

上下拉菜單在微信小程序中起提示、選項(xiàng)的功能，當(dāng)點(diǎn)擊它時(shí)會(huì)彈出屬于這個(gè)菜單的相應(yīng)選項(xiàng)。使用vant組件庫(kù)，將 dist 文件提前下載好然后保存到項(xiàng)目中。在小程序中調(diào)用組件庫(kù)，并在正確引用就可以實(shí)現(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 中對(duì)菜單進(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 中實(shí)現(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 中對(duì)菜單進(jìn)行設(shè)置。

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

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

color：設(shè)置顏色。

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

表 5 js代碼

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

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

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

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

<van-action-sheet

show="{{ show }}"

actions="{{ actions }}"

bind:close="onClose"

bind:select="onSelect"
/>

表 6 wxml代碼

圖 2 效果圖

結(jié)語(yǔ)

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

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

最新評(píng)論