• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

微信小程序——操作反馈小工具:action-sheet的使用及详解_啊哈嗯嗯的博客_action-sheet

Data: 2016-04-04 00:58:17Form: JournalClick: 10

微信小程序——操作反馈小工具:action-sheet的使用及详解

 

 action-sheet——底部弹起的操作按钮组件

属性:

bindchange:点击“取消” 或 “背景蒙层”所触发的事件
hidden:action-sheet是否可见

<action-sheet-item bindtap="itemTap" data-name="{{item.name}}" data-id="{{item.id}}">
                    {{item.name}}</action-sheet-item>
 
 

action-sheet-item:菜单项
bindtap:点击菜单项所出发的事件
data-name、data-id:获取到菜单项的数据
{{item.name}}:菜单项的名字
action-sheet-cancel :“取消”

案例:

在这里插入图片描述
点击“增加”获取数据:
在这里插入图片描述

全部代码:

wxml代码:

<!--index.wxml-->
<view class="container">

<button type="primary" bindtap="button">选择</button>

  <view class="ActionSheet">
    <action-sheet bindchange="actionsheetChange" hidden="{{showActionsheet}}">

       <block wx:for="{{groups}}" >
         <action-sheet-item bindtap="itemTap" data-name="{{item.name}}" data-id="{{item.id}}">{{item.name}}</action-sheet-item>
       </block>

       <action-sheet-cancel >取消</action-sheet-cancel>

    </action-sheet>

  </view>

</view>

 

js代码:

Page({

    /**
     * 页面的初始数据
     */
    data: {
      showActionsheet:true,
      groups: [
        {name:'增加',id:1},
        {name:'删除',id:2},
        {name:'查询',id:3},
        {name:'修改',id:4},
      ]
    },
 
    button:function(){
      console.log("-------------已点击按钮-------------");
       this.setData({showActionsheet:false});
    },
 
    actionsheetChange:function(){
      console.log("------------点击“取消” 或 “背景蒙层”----------------");
      this.setData({showActionsheet:true});
    },
 
    itemTap:function(even){
      console.log(even)
    }
 
  })
 
Name:
<提交>