微信小程序 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.actionSheetHidden
  })
 },
 actionSheetChange: function (e) {
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  })
 }
} 

for (var i = 0; i < items.length; ++i) {
 (function (itemName) {
  pageObject['bind' + itemName] = function (e) {
   console.log('click' + itemName, e)
  }
 })(items[i])
} 

Page(pageObject)

wxml

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
  <block wx:for-items="{{actionSheetItems}}">
    <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
  </block>
  <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序（二十二）action-sheet组件详细介绍

    微信小程序（二十二）action-sheet组件详细介绍

    action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件 主要属性: wxml <!--触发action-sheet事件--> <button type="primary" bindtap="listen

  • 微信小程序 action-sheet详解及实例代码

    微信小程序 action-sheet详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序  action-sheet 属性名 类型 默认值 说明 hidden Boolean true 是否隐藏 bindchange EventHandle   点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance

  • 微信小程序 action-sheet底部菜单详解

    微信小程序 action-sheet底部菜单详解

    微信小程序 action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件.可以在bindchange

  • 微信小程序 action-sheet 反馈上拉菜单简单实例

    微信小程序 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

  • 微信小程序封装多张图片上传api代码实例

    这篇文章主要介绍了微信小程序封装多张图片上传api代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 export default class Upload{ constructor(object) { this.obj = { count:1, sizeType:['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType:['album','camera'], //

  • 微信小程序中input标签详解及简单实例

    微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

  • 微信小程序 高德地图SDK详解及简单实例（源码下载）

    微信小程序 高德地图SDK详解及简单实例（源码下载）

    微信小程序 高德地图SDK: 简介 微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述.POI和实时天气数据. 功能介绍 账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 1注册高德开发者 2创建应用 3获取API key 获取API Key 入门指南 最后更新时间: 2017年1月9日 本指南是使用微信小程序SDK的快速入门指南. 第 1 步:下载并安装微信小程序开发工具 按照微信小程序开发文档下载并安装微信小

  • 微信小程序 this和that详解及简单实例

    微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend.原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了.官方的解决办法是,复制一份当前的对象,如

  • 微信小程序中的onLoad详解及简单实例

    微信小程序中的onLoad onLoad是一个生命周期函数,表示页面加载 onLoad默认有一个Object类型的参数,是指其他页面打开当前页面所调用的 query 参数 举个栗子~ 当我们在页面first的js脚本中有一个点击方法onTap 当点击时页面跳转到second页面,用?id = secondId的形式为second页面传递一个值(这里的secondId是一个已经获取过的值) onTap: function(){ wx.navigateTo({ url: "second?id=&qu

  • 微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

  • 微信小程序图片选择、上传到服务器、预览（PHP）实现实例

    微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 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

  • 微信小程序 ES6Promise.all批量上传文件实现代码

    微信小程序 ES6Promise.all批量上传文件实现代码 客户端 Page({ onLoad: function() { wx.chooseImage({ count: 9, success: function({ tempFilePaths }) { var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => { return new Promise(function(resolve, reject) { wx.

随机推荐