百度/微信小程序点击按钮回到顶部(scrollTop=0)/点击拨打电话

一、HTML部分

<!-- fixed固定位置 -->
<view class="fixed-right">
    <!-- 打电话 -->
    <view class="outside-box bg-box" bindtap="makePhone">
        <image class="phone-img" src="../../images/shop/yx_21.png"></image>
    </view>
    <!-- 去首页 -->
    <view class="outside-box m-t-40">
        <navigator open-type="redirect" url="/pages/shopindex/shopindex?shopid={{shopid}}">
            <image class="index-img" src="../../images/shop/yx_20.png"></image>
        </navigator>
    </view>
    <!-- 回到顶部 -->
    <view s-if="topFlag" class="outside-box m-t-40" bindtap="scrollToTop">
        <image class="top-img" src="../../images/shop/yx_19.png"></image>
    </view>
</view>

二、JS部分页面滚动回到顶部

1、监听页面滚动事件

    onPageScroll(e) {
        // console.log(e.scrollTop)
        if (e.scrollTop > 300) {
            this.setData({
                topFlag: true
            })
        } else {
            this.setData({
                topFlag: false
            })
        }
    },

2、回到顶部

    scrollToTop() {
        swan.pageScrollTo({
            scrollTop: 0,
            duration: 300,
            success: res => {
                console.log('pageScrollTo success', res);
            },
            fail: err => {
                console.log('pageScrollTo fail', err);
            }
        });
    },

3、拨打电话

    makePhone() {
        swan.makePhoneCall({
            phoneNumber: this.data.obj.mobile
        });
    },

祝在座的各位女程序员早日实现午餐自由,Lamer自由,面膜自由,组件自由。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 小程序面试题 小程序授权登录流程 0、如何获得用户信息...
    X秀秀阅读 1,894评论 0 8
  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 5,026评论 0 7
  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,601评论 0 0
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,638评论 0 9
  • Mobile Web Favorites 参与贡献 移动前端开发收藏夹,欢迎使用Issues以及 Pull Req...
    柴东啊阅读 954评论 0 2

友情链接更多精彩内容