微信小程序中的上拉、下拉菜单功能
问题描述
在使用小程序的时候基本的页面的一般都是很简洁的，所以会有一些菜单来做简单的诠释说明，或者是提供一些选项。这些菜单的弹出方式一般是向上和向下，那么如何来设置这些上下拉的菜单呢？
解决方案
上下拉菜单在微信小程序中起提示、选项的功能，当点击它时会弹出属于这个菜单的相应选项。使用vant组件库，将 dist 文件提前下载好然后保存到项目中。在小程序中调用组件库，并在正确引用就可以实现了菜单功能了。
一、下拉菜单
(1)在 json 中调用 van-tab 组件。
"usingComponents": {
"van-dropdown-menu": "/dist/dropdown-menu/index",
"van-dropdown-item": "/dist/dropdown-item/index",
}
表 1 json代码
(2)在 js 中对菜单进行设置。
option：设置菜单内容；
value：设置菜单内容的排列顺序。
Page({
data: {
option1: [
{ text: ' 白色； S', value: 0 },
{ text: ' 白色； M', value: 1 },
{ text: ' 白色； L', value: 2 }
],
value1: 0,
},
});
表 2 js代码
( 3 ) 在 wxml 中实现。
A ctive-color 设置选中状态颜色；
V alue设置排列顺序；
O ption菜单内容。
<van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
</van-dropdown-menu>
表 3 wxml代码
图 1 效果图
二、上拉菜单
(1)在 json 中调用 van-tab 组件。
"usingComponents": {
"van-action-sheet": "/dist/action-sheet/index"
}
表 4 json代码
( 2 )在 js 中对菜单进行设置。
name：设置菜单选项；
subname ： 设置副标题；
color：设置颜色。
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 中实现。
<van-action-sheet>: 设置上来菜单；
bind:select="onSelect" ： 选中选项时触发，禁用或加载状态下不会触发；
bind:close="onClose" ： 关闭时触发。
<van-action-sheet
show="{{ show }}"
actions="{{ actions }}"
bind:close="onClose"
bind:select="onSelect"
/>
表 6 wxml代码
图 2 效果图
结语
设置上下拉菜单可以使小程序界面简洁，在设置菜单的时候要注意对菜单内容和排列顺序设置正确。菜单跟其他的组件有一点点不同菜单一般是在 js 里面进行配置，可以根据需要在 js 中对菜单进行设置。菜单设置的标签有很多，需要理解记忆并运用。
到此这篇关于微信小程序中的上拉、下拉菜单功能的文章就介绍到这了,更多相关微信小程序上拉下拉菜单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
微信小程序实现下拉菜单切换效果
本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
-
微信小程序 action-sheet 反馈上拉菜单简单实例
微信小程序 action-sheet 反馈上拉菜单简单实例 看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti
-
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch
-
微信小程序实现单列下拉菜单效果
接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列.也把代码尽可能的简单化了. 实现的效果图: 合并状态: 首先下面是目录结构: 下面是实现的具体代码: .wxml <!--选择框--> <view class="product-list"> <!--条件选择--> <view class="choice-b
-
微信小程序 下拉菜单简单实例
微信小程序 下拉菜单简单实例 wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol
-
微信小程序实现顶部下拉菜单栏
本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //终点缓存的五个城市 endcitys: [], //用户选择省份之后对应的城市和县城 endkeys: {}, //用户选择县城 town: [], //所有车长 commanders: cityData.get
-
微信小程序 下拉菜单的实现
微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto
-
微信小程序中的上拉、下拉菜单功能
问题描述 在使用小程序的时候基本的页面的一般都是很简洁的,所以会有一些菜单来做简单的诠释说明,或者是提供一些选项.这些菜单的弹出方式一般是向上和向下,那么如何来设置这些上下拉的菜单呢? 解决方案 上下拉菜单在微信小程序中起提示.选项的功能,当点击它时会弹出属于这个菜单的相应选项.使用vant组件库,将 dist 文件提前下载好然后保存到项目中.在小程序中调用组件库,并在正确引用就可以实现了菜单功能了. 一.下拉菜单 (1)在 json 中调用 van-tab 组件. "usingComponen
-
微信小程序实现简单的select下拉框
微信小程序实现一个简单的select下拉框,供大家参考,具体内容如下 用的是transform过渡,没用动画 看看效果 废话不多说,直接上代码 wxml: <view class="item"> <label class="first"><text>*</text>公司/商户类型:</label> <!-- 通过点击事件改变图片的旋转角度.自定义下拉框的高度 --> <view class
-
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r
-
微信小程序scroll-view实现上拉加载数据重复的解决方法
微信小程序的 scroll-view 上拉加载更多的BUG(数据会多加载,甚至有重复数据). 问题描述:上拉一次,会多次触发触底函数 onReachBottom():换成自定义加载更多函数, 例如 loadMore(), 问题依旧存在. 生产环境:调试基础库 目前最新版本1.9.94 依旧存在这个问题. 解决方法:加状态控制变量,限制 触底函数/加载更多函数 的触发条件. 页面上拉加载更多后,看下图,有重复数据 通用前端wxml代码 search.wxml <!--pages/shop/sear
-
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
效果图展示: 实现方法: 在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图.一个用来存放播放按钮,同级写一个cover-view用来完成封面上的文字,设置绝对定位,水平垂直居中,在播放按钮上添加点击事件,点击之后隐藏cover-view,最后在监听视频结束事件,重新填充封面跟播放按钮就可以了. 代码: <video id="myVideo" src="{{videoSrc}}" enable-d
-
微信小程序scroll-view实现横向滚动和上拉加载示例
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项
-
tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: <!--选择图片 --> <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <im
-
微信小程序中正确使用地图的方法实例
目录 前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市 总结 前言 今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方
-
微信小程序中显示html格式内容的方法
前言 最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 准备工作: 首先我们下载wxParse github地址:https://github.com/icindy/wxParse 本地下载:http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar wx