uniapp使用支付宝关注组件life-follow

2022-06-14 13:58:22

1.首先去官网查看使用流程,得到组件后放入项目代码
2.注意事项:checkFollow 设置为true后,组件不会渲染如要渲染组件,需把 checkFollow 设置为false并且重新挂载组件(通过 a:if ,先设置为false再设置为true)。

3.因为样式不能调整,我采用把它覆盖在自定义按钮上并将life-follow样式设为透明,实际操作的是life-follow,展示的是自定义的按钮

<life-follow v-if="show":checkFollow="checkFollow" @checkFollow="checkFollowCb($event)" @close="closeCb"class="life-button-follow" sceneId="xxxx"/>
data(){return{
      show:true,//这个变量用来重新挂载组件(因为组件在关注一次之后不会再触发回调)
      isFollowed:false,//这个变量我用来展示自定义按钮样式中的是否关注
      checkFollow:true,// 通过组件获取关注状态。}},
checkFollowCb(e){// e.detail对象里会有followed字段,可以用来判断关注状态
      console.log('call back data: ', e);const{ followed, closeCount}= e.detail// 把checkFollow、show都置为falsethis.show=falsethis.checkFollow=false;this.isFollowed=followed;//重新展示组件setTimeout(()=>{this.show=true;});},closeCb(e){
      console.log('关闭关注浮层时 触发回调: ', e);const{ followed, closeCount}= e&& e.detailthis.isFollowed= followed;this.show=true;if(!followed){this.show=false;this.checkFollow=false;setTimeout(()=>{this.show=true;});}}
  • 作者:﹎я゛诗词几句。
  • 原文链接:https://blog.csdn.net/qq_43964369/article/details/124266922
    更新时间:2022-06-14 13:58:22