<view>
<button class="weui-btn" bindtap="showActionSheet">显示操作按钮组件</button>
<action-sheet wx:if="{{showActionSheet}}" cancel-text="取消" bind:cancel="hideActionSheet" bind:click="handleActionClick">
<view wx:for="{{actionSheetItems}}" wx:key="index">{{item.name}}</view>
</action-sheet>
</view>
在相应的 JS 文件中，需要定义 showActionSheet 函数来显示操作按钮组件，并定义 hideActionSheet 函数来处理取消操作。handleActionClick 函数用于处理点击操作按钮的事件：
Page({
data: {
showActionSheet: false,
actionSheetItems: [
{ name: '操作1', value: 'action1' },
{ name: '操作2', value: 'action2' },
{ name: '操作3', value: 'action3' },
],
},
showActionSheet: function () {
this.setData({
showActionSheet: true,
});
},
hideActionSheet: function () {
this.setData({
showActionSheet: false,
});
},
handleActionClick: function (e) {
console.log('用户点击了操作按钮:', e.detail.value);
// 根据实际需求执行相应操作
this.setData({
showActionSheet: false,
});
},
});
在上述示例中，点击按钮调用 showActionSheet 函数显示操作按钮组件。action-sheet 组件的 wx:if 属性用于控制是否显示操作按钮组件，cancel-text 属性用于设置取消按钮的文本。bind:cancel 事件用于监听取消操作，bind:click 事件用于监听点击操作按钮的事件。
你可以根据实际需求定制操作按钮的内容、样式、显示效果等。这是一个简单的 WeUI 操作按钮组件的使用示例，你可以根据项目需求进行更进一步的定制。
转载请注明出处：http://www.zyzy.cn/article/detail/1338/微信小程序