小程序----底部弹出框

最新推荐文章于 2024-08-15 23:03:45 发布

scwMason

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量3.1k

点赞数

分类专栏：微信小程序学习

本文链接：https://blog.csdn.net/scwMason/article/details/82818701

版权

微信小程序学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

方法一

<button bindtap='actionSheetTap'>弹出</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="changeTap">
  <block wx:for="{{actionSheetItems}}">
    <action-sheet-item bindtap="click{{item}}">
      {{item}}
    </action-sheet-item>
  </block>
  <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

var items = ['item1', 'item2', 'item3']
Page({

  /**
   * 页面的初始数据
   */
  data: {
    actionSheetHidden:false,
    actionSheetItems:items
  },
  changeTap:function(){
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  actionSheetTap:function(){
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  clickitem1:function(){
    console.log("item1");
  },
  clickitem2: function () {
    console.log("item2");
  },
  clickitem3: function () {
    console.log("item3");
  },

方法2：半自动化

<button bindtap='buttonclick' type='default'>弹出</button>

 buttonclick:function(){
    wx:wx.showActionSheet({
      itemList: ['item1','item2','item3'],
      itemColor: '',
      success: function(res) {
        if(!res.cancel){
          console.log(res.tapIndex);
        }
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },