android 应用置顶到最前端_uniApp / 小程序实现一个view滚动到一定高度置顶显示

最近在使用uniApp做一个模仿美团小程序的demo，其中遇到这样一个需求，就是筛选模块滚动到顶部就置顶显示

查阅了uniApp的官方文档以及微信小程序的官方文档，发现都有一个相同的API,如下：

实现思路如下：

1.在onLoad或mounted页面初始化的生命周期方法中获取需要置顶的view距离顶部的高度保存到data中

onLoad() {

// 监听筛选组件距离顶部的距离

const query = wx.createSelectorQuery()

query.select('#boxFixed').boundingClientRect()

query.exec((res)=>{

this.topRange = res[0].top //获取距离顶部的高度并保存

})

2.监听页面滚动，当滚动的距离大于上述距离顶部距离则增加一个固定在顶部的样式

// 监听页面滚动距离

onPageScroll(e) {

this.scrollSize = e.scrollTop

}

computed:{

// 监听筛选组件置顶和不置顶

openFixed(){

// 如果页面滚动的高度大于筛选组件距离顶部的高度，那就置顶，反之不置顶

if(this.scrollSize > this.topRange){

console.log('置顶')

this.isfixed = true

}else{

console.log('不置顶')

this.isfixed = false

}

//当上述isFixed为true的时候需要置顶的view会增加一个样式，使用 position = fixed 脱离文档流

//设置top = 0 即可完成置顶

本文地址：https://blog.csdn.net/C_zhihao/article/details/107116723

希望与广大网友互动？？

点此进行留言吧！

android 应用置顶到最前端_uniApp / 小程序实现一个view滚动到一定高度置顶显示相关推荐

web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
重磅：微信官方推出 Web 前端和小程序统一框架
大家好,我是你们的校长. 说实话,小程序真的是越来越火了.而市面上也有很多小程序的开发框架,尤其是针对 Vue 的,大家的想法很简单,就是想通过做 Web 的项目,能不能直接转换成小程序呢?这样,可以 ...
前端微信小程序常见面试题
1.微信小程序有几个文件 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构.内部主要是微信自己定义的一套组件 WXSS ( ...
web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容数据绑定渲染界面层数据渲染事件处 ...
大前端 - 微信小程序
目标: 1.小程序简介 2.微信小程序基础 3.解读初始化项目 4.项目实践 5.项目发布微信小程序简介小程序:移动端的开发. 传统App(Android/Ios)的开发和运营成本很高. 最早推出 ...
Java后端服务器点餐系统的部署+前端微信小程序开发（13）
Java后端服务器点餐系统的部署+前端微信小程序开发(13) 编译运行小程序 1,本地调试这和你上面java的运行要保持一致,如果是本地的java项目运行你就用 localhost 后台Java直接 ...
商城系统（SpringBoot后端+Vue管理员前端+微信小程序）正式开源啦！
一.项目介绍 mall是一套商城系统,包括 Spring Boot后端. Vue后台管理员前端 .微信小程序用户前端 . 主要功能有商品管理.订单管理.用户管理.商品收藏.加购物车.地址管理等. ma ...
微信小程序Android和ios授权,uni-app之APP和小程序微信授权方法
uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. ...
Spring Boot后端+Vue前端+微信小程序，完整的开源解决方案！
项目简介一个小商场系统,包括: 后端:Spring Boot 管理员前端:Vue 用户前端:微信小程序功能介绍 1.小商城首页专题列表.专题详情分类列表.分类详情品牌列表.品牌详情新品首 ...

android 应用置顶到最前端_uniApp / 小程序实现一个view滚动到一定高度置顶显示

android 应用置顶到最前端_uniApp / 小程序实现一个view滚动到一定高度置顶显示相关推荐

最新文章

热门文章