Rumah > applet WeChat > Pembangunan program mini > 微信小程序 action-sheet组件详细介绍

微信小程序 action-sheet组件详细介绍

高洛峰
Lepaskan: 2017-02-20 14:12:09
asal
2119 orang telah melayarinya

这篇文章主要介绍了微信小程序action-sheet组件详细介绍的相关资料,需要的朋友可以参考下

微信小程序 action-sheet组件详细介绍

action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件

主要属性:

微信小程序 action-sheet组件详细介绍

wxml

<!--触发action-sheet事件-->
<button type="primary" bindtap="listenerButton">弹出ActionSheet</button>
<!--默认action-sheet为隐藏,由button触发-->
<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" >

 <block wx:for-items="{{actionSheetItems}}" > 
  <action-sheet-item >{{item}}</action-sheet-item>
 </block>
 <!--自动隐藏action-sheet-->
 <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>
Salin selepas log masuk

js

Page({
 data:{
 // text:"这是一个页面"
 actionSheetHidden: true,
 actionSheetItems: [&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;]

 },

 listenerButton: function() {
  this.setData({
  //取反
   actionSheetHidden: !this.data.actionSheetHidden
  });
 },

 listenerActionSheet:function() {
 this.setData({
  actionSheetHidden: !this.data.actionSheetHidden
 })
 },


 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})
Salin selepas log masuk

更多微信小程序 action-sheet组件详细介绍相关文章请关注PHP中文网!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan