微信小程序 - 下拉列表的实现
微信小程序目前提供两种方式实现下拉列表:action-sheet 与 picker选择器
action-sheet
action-sheet 有两种方法实现下拉,第一种使用action-sheet 标签,第二种是使用wx.showActionSheet方法
(1)action-sheet 标签
<action-sheet bindchange="actionSheetChange" hidden="{{actionType}}"> <block wx:for="{{actionSheetItems}}" wx:key="*this"> <action-sheet-item class="item" bindtap="bindItemTap" data-name="{{item}}"> {{item}} </action-sheet-item> </block> <action-sheet-cancel class="cancel">取消</action-sheet-cancel> </action-sheet> <view> <input type="text" name="type" value="{{addTypeData}}" disabled="{{addTypeDis}}" bindfocus="addType" placeholder="请输入所在城市" style="border:1px solid black;margin:15px;"/> </view>
Page({ data:{ actionSheetItems : ['北京','上海','郑州','南京','成都','青岛','石家庄'], addTypeDis : false, actionType : true, addTypeData : "" }, addType : function(event){ this.setData({ addTypeDis : true, actionType :false, typeClass : " " }) }, bindItemTap:function(e){ this.setData({ addTypeDis : false, actionType :true, addTypeData :e.currentTarget.dataset.name, }) }, actionSheetChange: function(e) { this.setData({ addTypeDis : false, actionType : true, }) } })
注意:actionSheetItems数组最大长度为6,超过6个就不会显示。
效果如图:
(2)wx.showActionSheet(Object)
<input disabled="{{addLevelDis}}" type="text" bindfocus="addLevel" value="{{addLevelData}}" style="border:1px solid black;margin:20px;" placeholder="请输入用户级别"/>
Page({ data:{ actionSheetLevelItems : ['A','B','C','S'], addLevelData: "", addLevelDis: false }, addLevel : function(event) { this.setData({ addLevelDis: true }) var that = this wx.showActionSheet({ itemList: that.data.actionSheetLevelItems, success: function(res) { if (!res.cancel) { that.setData({ addLevelData:that.data.actionSheetLevelItems[res.tapIndex] }) } that.setData({ addLevelDis: false }) } }) } })
效果如图:
picker 选择器
滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。 (1)普通选择器:mode = selector (2)时间选择器:mode = time (3)日期选择器:mode = date |
<view style="border:1px solid black; margin: 15px;"> <view class="section" style="margin:20px;"> <picker mode="selector" bindchange="bindPickerChange" value="{{arrayIndex}}" range="{{array}}" name="area"> <view class="picker"> 地区:{{array[arrayIndex]}} </view> </picker> </view> <view class="section" style="margin:20px;"> <picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange" name="time"> <view class="picker"> 时间:{{time}} </view> </picker> </view> <view class="section" style="margin:20px;"> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" name="date"> <view class="picker"> 日期:{{date}} </view> </picker> </view> </view>
Page({ data:{ array: ['中国', '美国', '巴西', '日本'], arrayIndex: 0, date: '2016-09-01', time: '09:00' }, bindPickerChange: function(e) { this.setData({ arrayIndex: e.detail.value }) }, bindDateChange: function(e) { this.setData({ date: e.detail.value }) }, bindTimeChange: function(e) { this.setData({ time: e.detail.value }) } })
效果如图:
相关推荐
微信小程序的Action-Sheet组件是一种常见的交互元素,它模拟了iOS设计中的下拉菜单功能,用于展示一系列可选项供用户选择。在微信小程序中,Action-Sheet通常用于在底部弹出一个包含多个操作的列表,用户点击后执行...
微信小程序的`loading`组件是开发者在构建应用时经常用到的一个组件,它主要用于表示数据加载状态,给用户展示一个正在处理的过程,增加用户体验的友好性。本篇将深入讲解`loading`组件的实例和使用方法。 ### 1. `...
微信小程序是腾讯公司推出的一种轻量级的应用开发框架,它允许开发者通过编写JavaScript、WXML(微信小程序标记语言)和WXSS(微信小程序样式语言)来构建用户界面,并实现应用程序的功能。本文将深入探讨微信小程序...
在微信小程序开发中,`window`配置是至关重要的部分,...以上就是关于微信小程序`window`配置的详细介绍,以及与之相关的组件和功能。理解并熟练运用这些配置和组件,可以帮助开发者创建出美观且用户体验良好的小程序。
【微信小程序navigator组件详解】 在微信小程序开发中,navigator组件是一个至关重要的部分,它负责页面间的跳转。navigator组件提供了两种不同的跳转方式,一种是关闭当前页面后跳转到新页面,另一种是在当前页面...
微信小程序的Icon组件是开发者在构建用户界面时经常会用到的一种元素,用于显示各种状态的图标,如成功、警告、信息提示等。本篇将详细阐述Icon组件的主要属性、使用方式以及常见图标类型。 首先,Icon组件的主要...
微信小程序中还有其他多种组件,如`icon`、`text`、`switch`、`tabBar`、`progress`、`action-sheet`、`button`、`modal`、`checkbox`、`toast`、`form`、`input`、`navigator`、`view`、`audio`等,它们共同构建了...
微信小程序中的`Image`组件是用于展示图像的关键组件,无论是网络图片还是本地资源,都可以通过设置`src`属性来加载。在小程序开发中,`Image`组件的应用无处不在,为用户界面添加丰富的视觉效果。 ### 1. 图片加载...
**微信小程序scroll-view组件详解** 在微信小程序开发中,`scroll-view`组件是一个非常重要的组件,它用于实现页面的滚动效果,支持水平和垂直滚动。本文将深入介绍`scroll-view`组件的特性和使用方法。 ### 一、...
微信小程序还提供了许多其他组件,如`icon`图标组件、`switch`开关组件、`progress`进度条组件、`action-sheet`操作菜单、`modal`模态对话框、`checkbox`复选框、`toast`提示框、`form`表单组件、`picker`选择器、`...
- `picker`:选择器组件。 - `scroll-view`:可滚动视图区域。 - `radio`:单选框组件。 - `video`:视频组件。 - `swiper`:轮播组件。 - `slider`:滑块组件。 - `image`:图片组件。 以上就是微信小程序`...
微信小程序中的`modal`组件是一个非常重要的交互元素,它用于弹出一个模态对话框,向用户展示关键信息并等待用户的确认或取消操作。在微信小程序开发中,`modal`组件常用于进行确认、提示或者询问等场景,例如提示...
微信小程序的Progress组件是用于展示进度状态的一种可视化组件,它能够清晰地呈现任务的完成度,如文件下载、视频加载等场景。在小程序开发中,Progress组件提供了丰富的自定义属性,使得开发者可以根据需求灵活地...
在微信小程序开发中,`checkbox`组件用于创建一个多选框,允许用户进行多项选择。`checkbox`组件常常配合`checkbox-group`一起使用,以实现更完整的多选功能。以下是关于`checkbox`组件及其相关知识点的详细说明: ...
微信小程序的slider组件是用于创建滑块选择器的,它在用户界面中提供了一种简单直观的方式来调整一个数值或在预设范围内进行选择。在本文中,我们将详细探讨slider组件的特性和用法。 首先,slider组件的主要属性...
- **picker组件**: 选择器,用于让用户从预设选项中选择。 - **audio组件**: 音频播放器,用于播放音频。 - **video组件**: 视频播放器,用于播放视频。 - **slider组件**: 滑块,常用于调整数值。 - **image组件**:...
微信小程序的`toast`组件是一种轻量级的提示方式,用于快速向用户展示短暂的通知信息,通常用于非阻塞操作的提示,例如加载完成、清除缓存等。它会在屏幕中心短暂显示信息,然后自动消失,不影响用户进行其他操作。 ...
Vux 是一个基于 Vue.js 和 WeUI 设计的移动端 UI 组件库,它为开发者提供了构建高质量移动应用的工具和组件。...无论是在微信小程序还是独立的移动端 H5 页面中,Vux 都是一个值得推荐的 UI 解决方案。