邢台网站建设,邢台系统开发
邢台网站建设,邢台网站制作,邢台网络公司,邢台系统开发,邢台网站设计,邢台网页制作
旧版网站
15081754822
网站首页 网站建设 系统开发 系统开发知识 手机网站 外贸网站 网站维护 网站案例 选课系统 宣传片拍摄 微信开发 行业交流 联系我们
 
邢台区县网站建设
邢台行业门户网站建设
邢台网站策划
邢台画册设计
公司主营业务
  系统开发
网站建设
手机网站
网站案例
成品网站
网站维护
域名注册
虚似主机
机房工程
弱电工程
视频主持人
 
增值服务
 
SSL证书申请
微信小程序
 
关于我们
 
公司简介
公司视频
支付方式
人才招聘
企业文化
服务承诺
合作伙伴
下载中心
 
你所处的位置:首页 - 微信小程序 - 微信小程序,滑动页面到指定位置,固定元素在顶部
微信小程序,滑动页面到指定位置,固定元素在顶部
发布日期:2020-3-15 11:38:16  浏览次数:375次

平常开发中可能会用到,当页面滑动到某一个位置时,需要固定导航栏或者某个元素在顶部位置,向上滑动又会回归原位,方法特别好实现,在小程序自带的方法


onPageScroll中可以得到滑动距离顶部的距离,在data公共数据中定义scrollTop,代码如下

onPageScroll: function (t) {

var a = this;

// console.log(t.scrollTop)

a.setData({

scrollTop:t.scrollTop

})

}得到滑动距离后,当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位,我写的是一个可以左右滑动的导航栏,因此为要在scroll-view中定义

class="{{scrollTop>758 ? 'rel' : 'nav'}}",758就是我需要定义的模块距离顶部的距离,当超过这个距离就会执行css的rel样式

position: fixed;

top:52px;

z-index:999;否则就执行愿有的css样式,  我此处需要注意的问题是top属性要定义px的距离单位,如果使用百分比会产生屏幕尺寸问题,

这种写法我这边在开发者工具中显示有些卡顿,真机上还好,日后再改进吧




作者:未知 上一条: 小程序开发之底部导航栏打电话
来源:互联网 下一条: 微信小程序之底部导航栏目开发
奥祥介绍 联系我们
域名注册 成品网站
成功案例 客户服务
行业交流 支付方式
版权所有: © 2005-2020 邢台奥祥网络™
联系电话:15081754822  
公司邮箱:125856421@qq.com 《信息产业部备案 冀ICP备09043254号》
本站关键词:邢台网站建设 邢台网站设计 河北邢台网络公司 邢台网站制作公司 邢台网站推广邢台网站制作
网站统计: