- 如何实现一个带图标的actionSheet效果
刚才有童鞋询问如何给actionSheet前加图标,然鹅官方没提供该效果,那么我们自己做一个定制化的actionSheet吧。 还是那句话,有需求,咱们有空就去实现下,也算是能锻炼自己的动手能力,提升点知识面。。 先看看实现后的效果图: [图片] 首先自定义actionSheet组件。 wxml 简单的页面布局。 [代码]<view class="qts-as-mask qts-class-mask {{ visible ? 'qts-as-mask-show' : '' }}" bindtap="handleClickMask" catchtouchmove="preventTouchmove" ></view> <view class="qts-class qts-as {{ visible ? 'qts-as-show' : '' }}" catchtouchmove="preventTouchmove"> <view class="qts-as-header qts-class-header"> <slot name="header"></slot> </view> <view class="qts-as-actions"> <view class="qts-as-action-item" wx:for="{{actions}}" wx:key="name"> <button hover-class="none" bindtap="handleClickItem" data-index="{{index}}" open-type="{{item.openType}}" class="qts-as-btn-qts ptp_exposure" > <image wx:if="{{item.icon}}" src="{{item.icon}}" class="qts-btn-image" /> <view class="qts-as-btn-text">{{item.name}}</view> </button> </view> </view> <view class="qts-as-cancel" wx:if="{{showCancel}}"> <button hover-class="none" class="qts-as-cancel-btn" bindtap="handleClickCancel">取消</button> </view> </view> [代码] js处理: 定制了三种功能: 是否需要隐藏取消按钮 是否需要点击蒙层关闭actionSheet 内容外部组件可配置 [代码]Component({ externalClasses: ['qts-class', 'qts-class-mask', 'qts-class-header'], options: { multipleSlots: true }, properties: { showCancel: { type: Boolean, value: true }, visible: { type: Boolean, value: false }, actions: { type: Array, value: [] }, maskClosable: { type: Boolean, value: true } }, methods: { handleClickMask() { if (!this.data.maskClosable) return; this.handleClickCancel(); }, preventTouchmove() {}, handleClickItem(e) { const dataset = e.currentTarget.dataset || '' this.triggerEvent('click', dataset) this.triggerEvent('cancel'); }, handleClickCancel() { this.triggerEvent('cancel'); } } }) [代码] 应用的页面引用该组件: [代码]<view class="container" bindtap="handleClick">点我弹出actionSheet</view> <!-- visible 弹窗显隐藏 show-cancel 是否显示取消按钮 bind:cancel 取消按钮点击回调 bind:click 单个item点击回调 mask-closable 点击蒙层是否关闭弹窗 --> <action-sheet visible="{{visible}}" actions="{{actions}}" show-cancel bind:cancel="handleClick" bind:click="handleClickItem" mask-closable="{{true}}" /> [代码] [代码]const app = getApp() Page({ data: { //可配置items选项,支持传入button的openType属性 actions: [{ name: '生成图片', icon: 'https://qiniu-image.qtshe.com/201809104.png' }, { name: '转发给好友或群聊天', icon: 'https://qiniu-image.qtshe.com/201809105.png', openType: 'share' } ], visible: false }, //弹窗显隐藏 handleClick() { this.setData({ visible: !this.data.visible }) }, //单个item点击 //actionsheet内的点击方法 handleClickItem({detail}) { if (detail.index === 0) { console.log(111) //第一个选项被点击 } }, }) [代码] 以上就是一个自定义actionSheet的实现方式以及引用方式。。 老规矩,附上代码片段。 https://developers.weixin.qq.com/s/Bhc0Sjmw7AgW
2020-05-26 - 小程序被系统冻结后资源多久会被释放?
遇到的问题非常头疼 在同一主体下申请新的小程序时发现有重名账号,进行侵权投诉也被驳回。 [图片] 我们尝试在小程序后台进行注销,发现账号已经被冻结。 [图片] 取消冻结需要先找回账号,然后又“不支持此小程序找回” [图片] 绝望了。。。 那么请问我想用原来小程序的名称,到底应该怎么办。。。 跪求官方帮忙解决
2019-09-10 - 关于小程序内用户帐号登录的审核问题
问题描述 根据《小程序内用户帐号登录规范调整和优化建议》文档描述,针对“服务范围特定的小程序”,可以直接引导用户进行登录。 不知道付费课程相关的小程序属于“服务范围特定”这个范畴么? 利益相关 我们在做一款叫做「倾学英语」的小程序,针对公众号付费用户提供配套的场景口语课程,目前不对免费用户开放。
2019-07-24