【小程序】微信小程序中实现【关注公众号】弹窗-Toy模板网

这篇具有很好参考价值的文章主要介绍了【小程序】微信小程序中实现【关注公众号】弹窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、效果，注意，在开发工具中并不显示公众号信息，只有在体验版和正式版中才能看到！

小程序弹窗关注公众号,0.【小程序】,微信小程序,小程序,微信文章来源地址https://www.toymoban.com/news/detail-552277.html

2、wxml代码实现


<!-- 关注公众号弹出 -->
<view wx:if="{{isCloseDown==1}}" class="pop_down">
  <view class="panel">
    <view class="row_1">
      关注公众号，马上参与活动！
    </view>
    <view class="row_2">
      <official-account>
      </official-account>
    </view>
    <view class="row_3" bindtap="closePop">
      我已关注
    </view>
  </view>
</view>

3、wxss代码


/* #region ==== 底部弹出【关注公众号】 */
.pop_down {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    background-color: rgba(36, 36, 36, 0.7);
    text-align: center;
}

.panel {
    width: 100%;
    height: 177px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
    text-align: center;
}

.row_1 {
    height: 45px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background-color: rgb(250, 250, 250);
    font-size: 1;
    line-height: 45px;
    color: rgb(202, 202, 202);

}

.row_3 {
    height: 45px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 15px;
    line-height: 45px;
    font-weight: bold;
    color: rgb(72, 182, 84);
    background-color: rgb(245, 245, 245);
    margin-bottom: 40px;
}

/* #endregion */

4、js代码

    data: {
        isCloseDown: 1, // 0-关闭 1-显示 [关注公众号]弹窗


    // 关闭[关注公众号]弹窗
    closePop: function () {
        this.setData({
            isCloseDown: 0
        })
    },

到了这里，关于【小程序】微信小程序中实现【关注公众号】弹窗的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！