1、原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法、属性进行联合操作

2、效果图:

3、wxml:

<scroll-view  scroll-y="true" style="height:{{scrollHeight}}px;" bindscroll="scroll" scroll-top="{{scrollTop}}" >
<text class="title">{{list.art_title}}</text>
<p class="oneline">{{list.seo_desc}}</p> <!--回到顶部 -->
<view class="com-widget-goTop" bindtap="goTop" wx:if="{{floorstatus}}">
<view class="icon-gotop">
顶部
</view>
</view> </scroll-view>

4、js:

  scroll: function (e, res) {
// 容器滚动时实时获取滚动高度:e.detail.scrollTop
//当超过限定值如500时,展示【返回顶部图片】,通过标识"floorstatus"的真假判断展示、隐藏
if (e.detail.scrollTop > 500) {
this.setData({
floorstatus: true
});
}
else {
this.setData({
floorstatus: false
});
}
},
// 点击图片,使scrollTop属性==0,回到顶部
goTop: function (e) {
this.setData({
scrollTop: 0
})
},

5、wxss:

/*回到顶部  */
.com-widget-goTop {
position: fixed;
bottom: 125px;
right: 5px;
background: rgba(0,0,0,0.48);
border-radius: 50%;
overflow: hidden;
z-index:;
}
.com-widget-goTop .icon-gotop{
background-color: rgba(0,0,0,0.8);
display: inline-block;
width: 50px;
height: 50px;
line-height: 68px;
font-size: 12px;
color: #ffffff;
text-align: center;
border-radius: 50%;
background:url(http://m.dev.vd.cn/static/xcx/v1/goo/w_2-3451cc437e.png) no-repeat center -1110px;
background-size:50px auto;
}
/*end*/

【微信小程序】实现类似WEB端【返回顶部】功能的更多相关文章

  1. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

  2. WordPress版微信小程序3.1.5版的新功能

    产品的完善是无止境,每过段时间就会发现产品的新问题,使用的人越多,提的需求也会越多,我听得最多的一句话就是:如果加上某某功能就完美了.其实,完美是不存在的,每个人的视角不一样,完美的定义也是不一样的. ...

  3. 微信小程序wx.showActionSheet调用客服信息功能

    微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...

  4. 微信小程序初见+nodejs服务端 (一个简单的博客)

    推荐网址: 腾讯云快速开发(nodejs前后端):https://developers.weixin.qq.com/miniprogram/dev/qcloud/qcloud.html#%E5%AF% ...

  5. 微信小程序将带来web程序员的春天!

    微信之父张小龙在年初那次演讲中曾表示:“我自己是很多年的程序员,我觉得我们应该为开发的团体做一些事情.”几个月后,微信正式推出微信应用号(即微信小程序)在互联网中掀起又一波热潮. 过去,对于很多开发者 ...

  6. 微信小程序,请求php后台返回json数据多出隐藏字符问题

    这几天在做一个微信小程序注册登录页面的时候碰到一个问题,就是使用wx.request api的时候success中返回的JSON数据前面会多出空白字符,后面网上查了一下是说php bom头问题(详细介 ...

  7. 微信小程序简单的数据表格及查询功能

    简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具 前端:界面布局样式和js的跳转 后端:依靠SpringBoot的业务逻辑层 项目的码云地址: https://gi ...

  8. 微信小程序转发商品的详情页 + 转发功能(传参)

    1.微信小程序转发传参,利用的还是onShareAppMessageapi 2.利用的还有json转换 JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 函数 描述JSO ...

  9. 微信小程序使用同声传译实现语音识别功能

    我使用同声传译语音识别功能是为了实现微信小程序首页的语音搜索功能,如果你也是那么恭喜你,你可以ctrl+c.ctrl+v再改一改,如果你不是那么你也不要着急的走可以看完我的文章会对你有所帮助! 首先是 ...

  10. 微信小程序正式上线 可置于聊天窗口顶部

    历经一年的等待后,小程序在2017年1月9日凌晨终于揭开神秘面纱,正式上线. 微信小程序推广海报 随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更 ...

随机推荐

  1. pytest文档15-使用自定义标记mark

    前言 pytest可以支持自定义标记,自定义标记可以把一个web项目划分多个模块,然后指定模块名称执行.app自动化的时候,如果想android和ios公用一套代码时, 也可以使用标记功能,标明哪些是 ...

  2. 判断一个请求是否为Ajax请求

    这几天在写一个网站的登录判断拦截器,需要对请求进行拦截,在拦截器中我需要判断HttpServletRequest是否为Ajax异步请求.我们可以通过X-Requested-With="XML ...

  3. 修改后无警告全面支持non-ARC以及ARC的OpenUDID

    OpenUDID Open source initiative for a universal and persistent UDID solution for iOS. 首创的给iOS提供设备唯一标 ...

  4. Spring Data Jpa 查询返回自定义对象

    转载请注明出处:http://www.wangyongkui.com/java-jpa-query. 今天使用Jpa遇到一个问题,发现查询多个字段时返回对象不能自动转换成自定义对象.代码如下: //U ...

  5. 关于Themleaf学习总结

    此篇记录学习Themleaf测试的相关用例: study01 Thymeleaf 的HelloWorld级别的例子 简单介绍Thymeleaf的工作流程 study02 使用spring.thymel ...

  6. 加载依赖的jar包在命令行编译和运行java文件

    在命令里编译和执行java文件,当应用程序需要需要依赖的jar包里面的class文件才能编译运行的时候,应该这样做: 1. 首先是编译过程,在命令行里面执行: (1) javac -classpath ...

  7. 【转载】关于大数据库的一些不错的GitHub项目

    优秀大数据GitHub项目一览 http://blog.csdn.net/YaoXTao/article/details/50540485

  8. 附 5 springboot之配置文件

    本文转载自http://www.jianshu.com/p/80621291373b,作者:龙白一梦 我的boss 代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境 ...

  9. CSS文字换行详细解说

    本文列举了兼容 IE 和 FF 地换行 CSS 推荐样式,详细介绍了word-wrap同word-break地区别.兼容 IE 和 FF 地换行 CSS 推荐样式: 最好地方式是 word-wrap: ...

  10. IOS之UITabBarController

    在学习IOS开发过程中,针对于UITabBarController的使用也不少出现,UITabBarController和UINavigationController类似,UITabBarContro ...