快捷導(dǎo)航

微信小程序 action-sheet 反饋上拉菜單簡單實(shí)例

更新時(shí)間：2017年05月11日 17:04:57 作者：xiaochun365

這篇文章主要介紹了微信小程序 action-sheet 反饋上拉菜單簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下

微信小程序 action-sheet 反饋上拉菜單簡單實(shí)例

看下實(shí)現(xiàn)效果圖：

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>

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序開發(fā)工具快捷鍵整理
這篇文章主要介紹了微信小程序快捷鍵整理的相關(guān)資料,這里整理了不少項(xiàng)目中經(jīng)常用到的快捷鍵，需要的朋友可以參考下
2016-10-10
quickjs 封裝 JavaScript 沙箱詳情
這篇文章主要介紹了 quickjs 封裝 JavaScript 沙箱，在前文 JavaScript 沙箱探索中聲明了沙箱的接口，并且給出了一些簡單的執(zhí)行任意第三方 js 腳本的代碼，但并未實(shí)現(xiàn)完整的 IJavaScriptShadowbox，下面便講一下如何基于 quickjs 實(shí)現(xiàn),需要的朋友可以參考一下
2021-10-10
Three.js實(shí)現(xiàn)雪糕地球的使用示例詳解
這篇文章主要為大家介紹了Three.js實(shí)現(xiàn)雪糕地球的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JavaScript?對(duì)象管家?Proxy
這篇文章主要為大家介紹了JavaScript對(duì)象管家Proxy使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
使用javascript解析二維碼的三種方式
這篇文章主要給大家分享使用javascript解析二維碼的三種方式，二維碼就是將我們能看懂的文字語言,以機(jī)器語言的形式存儲(chǔ)了起來。其中黑色小方塊代表的是1,白色小方塊代表的是0，黑白相間的圖案其實(shí)就是一串編碼,掃碼的過程就是翻譯這些編碼的過程,需要的朋友可以參考一下
2021-11-11
微信小程序支付之c#后臺(tái)實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序支付之c#后臺(tái)實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下
2017-10-10
微信小程序（五）頁面生命周期詳細(xì)介紹
這篇文章主要介紹了微信小程序頁面生命周期的相關(guān)資料,需要的朋友可以參考下
2016-09-09
Javascript基礎(chǔ)知識(shí)中關(guān)于內(nèi)置對(duì)象的知識(shí)
這篇文章主要介紹了Javascript基礎(chǔ)知識(shí)中關(guān)于內(nèi)置對(duì)象的相關(guān)知識(shí)的相關(guān)資料,需要的朋友可以參考下面小編薇大家?guī)淼木饰恼?/div> 2021-09-09
一看就懂的JavaScript適配器模式圖解及使用示例
這篇文章主要為大家介紹了JavaScript適配器模式圖解及使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
關(guān)于JavaScript?中?if包含逗號(hào)表達(dá)式
這篇文章主要介紹了?關(guān)于JavaScript?中?if包含逗號(hào)表達(dá)式，有時(shí)會(huì)看到JavaScript中if判斷里包含英文逗號(hào)?“,”，這個(gè)是其實(shí)是逗號(hào)表達(dá)式。在if條件里，只有最后一個(gè)表達(dá)式起判斷作用。下面來看看文章的具體介紹吧
2021-11-11