位置: IT常识 - 正文

微信小程序实现顶部固定底部分页滚动效果(微信小程序实现支付功能)

编辑:rootadmin
这篇文章主要介绍了微信小程序实现顶部固定底部分页滚动效果,本文大概给大家分享三种解决方案,每种方案给大家详细剖析通过代码解析哪种方案更适合,感兴趣的朋友跟随小编一起看看吧 目录

推荐整理分享微信小程序实现顶部固定底部分页滚动效果(微信小程序实现支付功能),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序实现账号密码登录,微信小程序实现轮播图,微信小程序实现轮播效果的组件,微信小程序实现聊天功能,微信小程序实现发红包,微信小程序实现轮播效果的组件,微信小程序实现轮播效果的组件,微信小程序实现轮播效果的组件,内容如对您有帮助,希望把文章链接给更多的朋友!

方案说明:思路说明:

常见商品页效果:顶部banner+分类,下面商品列表。

方案说明:

方案1:整个页面滚动,滚动至某个位置fixed图中“顶部box2”,分页页面触底加载

方案2:页面高度为屏幕高度,商品部分使用scroll-view,scroll-view初始高度为屏幕高度-顶部高度,只滚动scroll-view。

思路说明:

  1 将整个页面分为上下两部分,整个页面高度100vh(原因1:scroll-view高度需要固定高度;原因2:出现两个滚动条)

  2 页面上半部分包括banner(box1)以及固定的搜索及tab(box2)

  3 根据顶部box的高度,算出下面scroll-view的高度(windowHieght - 200)

  4 scroll-view滑动到 顶部box1+margin10的高度,将box1隐藏,box2动画移至顶部;下面scroll高度+滚动高度(或box1高度) + margin10高度(确保scroll的商品吸顶之后任然沾满屏幕)

方案3:使用插件

微信小程序实现顶部固定底部分页滚动效果(微信小程序实现支付功能)

选择的是方案2,为什么不选择方案1,我们来剖析一下。

方案1适合页面交互比较简单,根据页面滚动高度隐藏展示即可。

  场景1:tab吸顶之后,切换tab请求数据,页面就会渲染为最初样式,不会吸顶。(请求会重新setData数据,有些数据有多有少)

复制以下代码可以直接演示demo效果

demo.wxml

<!--pages/demo/demo.wxml--><view class="wrap"><view class="top-box"><view class="top-box1">顶部box1</view><!-- <view class="top-box2"></view> --><scroll-view class="top-box2" scroll-into-view="{{scrollId}}" scroll-x="true"scroll-with-animation="true" ><block wx:for="{{cates}}" wx:key="index"><view class="{{item.id === currentId?'cate-item-act cate-item':'cate-item'}}" data-id="{{item.id}}" id="good{{item.id}}" bindtap="cateChange">{{item.name}}</view></block></scroll-view></view><scroll-view scroll-y="true" class="scroll-con" bindscroll="goodsViewScroll" bindscrolltoupper="goodsViewScrollTop"><view class="scroll-con-item" wx:for="{{cates}}" wx:key="index">{{item.name}}</view></scroll-view></view>

demo.js

Page({data: {cates:[{id:null,name:'全部'},{id:1,name:'分类1'},{id:2,name:'分类2'},{id:3,name:'分类3'},{id:4,name:'分类4'},{id:5,name:'分类5'},{id:6,name:'分类6'},{id:7,name:'分类7'},{id:8,name:'分类8'}],currentId:null,serviceList:[{id:1,name:'1'},{id:2,name:'2'},{id:3,name:'3'},{id:4,name:'4'},{id:5,name:'5'},{id:6,name:'6'},{id:7,name:'7'},{id:8,name:'8'}],scrollId:null,//滑动id,切换tab效果animationStyle:'',isNeedFixed:false},/*** 生命周期函数--监听页面加载*/onLoad(options) {let that = this;wx.getSystemInfo({success: function (res, rect) {that.setData({// 商品scroll高度 = 可使用窗口 - (顶部box的高度+margin20 -20(底部留白))scrollViewHeight: parseInt(res.windowHeight - 220 -20),scrollViewStyle:`height:${parseInt(res.windowHeight - 220-20)}px`})}})},cateChange(e){let currentId = e.currentTarget.dataset.id;let scrollId = e.currentTarget.id;this.setData({currentId,scrollId})},// 加this.data.isNeedFixed条件防止频繁的setdata// 1 隐藏box1,box2会自动吸顶 box2置顶// 2 设置scroll-view高度+120, 设置顶部box高度为box2高度goodsViewScroll(e){console.log(e.detail.scrollTop, this.data.isNeedFixed)if(e.detail.scrollTop >= 120 ){console.log('可以动画调整位置了')this.setData({isNeedFixed:true,box1Style:`height:0px;`,boxStyle:`height:80px;`,scrollViewStyle: `height:${this.data.scrollViewHeight + 120}px`,}}// if(e.detail.scrollTop < 120 ) {// console.log('需要保持原样')// this.setData({// isNeedFixed:false,// box1Style:`height:110px;`,// boxStyle:`height:200px;`,// scrollViewStyle: `height:${this.data.scrollViewHeight}px`,// },()=>{// wx.pageScrollTo({// scrollTop: 0,// })// })// }},goodsViewScrollTop(e){this.setData({isNeedFixed:false,box1Style:`height:110px;`,boxStyle:`height:200px;`,scrollViewStyle: `height:${this.data.scrollViewHeight}px`,})}})

demo.wxss

.wrap {height: 100vh;}.top-box {height: 200px;height: 200px;background-color: #fff;border: 1px solid #d1d1d1;transition:height 0.2s;-webkit-transition:height 0.2s; /* Safari */}.top-box1 {height: 110px;width: 100%;margin-bottom: 10px;background-color: #3293FF;overflow: hidden;transition:height 0.2s;-webkit-transition:height 0.2s; /* Safari */}.top-box2 {height: 80px;width: 100%;background-color: #ffbe32;white-space: nowrap;padding: 50rpx 0;box-sizing: border-box;}.top-box2 .cate-item {display: inline-block;padding: 10rpx 20rpx;font-size: 26rpx;margin-right: 20rpx;color: #767A84;}.top-box2 .cate-item:last-child{margin-right: 0rpx;}.top-box2 .cate-item-act {background: #3293FF;color: #fff;border-radius: 48rpx;}.scroll-con {padding: 0 10px;margin-top: 20px;box-sizing: border-box;background-color: #fff;}.scroll-con-item {height: 100px;width: 100%;background-color: salmon;margin-bottom: 10px;}.ani-btn {display: inline-block;padding: 20rpx;margin: 10rpx;border: 1px solid #d1d1d1;}@keyframes move{ from{transform: translateY( 30px)} to {transform: translateY( 0px)}}

说明1:scroll-into-view 设置哪个方向可滚动,则在哪个方向滚动到该元素

  scroll-view设置x轴滚动到scrollId位置 scroll-x="true"scroll-into-view="{{scrollId}}"    

  item子元素设置id="good{{item.id}}" 由于id不能已数字开头,所以前面拼了"good"

说明2:为什么要在bindscrolltoupper触顶事件中处理初始化样式,而不是在bindscroll的时候处理?

  使用bindscroll处理,滑动会有来回闪动的情况

这些只是大致思路,还有很多细节需要处理和考.......

到此这篇关于微信小程序实现顶部固定 底部分页滚动效果的文章就介绍到这了,更多相关小程序顶部固定内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

本文链接地址:https://www.jiuchutong.com/zhishi/310666.html 转载请保留说明!

上一篇:java非公平锁如何理解(java公平锁有哪些)

下一篇:RabbitMQ 常见问题(rabbitmq work queue)

  • 丰网速运去哪里取件(中通快递 物流)

    丰网速运去哪里取件(中通快递 物流)

  • 红米k30s至尊纪念版用的是高通的处理器吗(红米k30s至尊纪念版参数)

    红米k30s至尊纪念版用的是高通的处理器吗(红米k30s至尊纪念版参数)

  • 新开的手机号被别人注册了微信怎么办(新开的手机号被注册了抖音)

    新开的手机号被别人注册了微信怎么办(新开的手机号被注册了抖音)

  • 麒麟990比麒麟980提升多少(麒麟990比麒麟970提升多少)

    麒麟990比麒麟980提升多少(麒麟990比麒麟970提升多少)

  • soul修改背景图功能升级中(soul怎么修改背景图)

    soul修改背景图功能升级中(soul怎么修改背景图)

  • QQ扩列怎么关闭(qq扩列怎么关闭了)

    QQ扩列怎么关闭(qq扩列怎么关闭了)

  • 小米8lite是啥手机(小米手机8 lite)

    小米8lite是啥手机(小米手机8 lite)

  • 小栈是什么意思(小栈的栈怎么写)

    小栈是什么意思(小栈的栈怎么写)

  • 闲鱼卖家可以拒绝退货吗(闲鱼卖家可以拒收吗)

    闲鱼卖家可以拒绝退货吗(闲鱼卖家可以拒收吗)

  • 电脑冷启动按哪几个键(电脑冷启动按哪几个键图片)

    电脑冷启动按哪几个键(电脑冷启动按哪几个键图片)

  • 华为关机闹钟还会响吗(华为关机闹钟还响吗怎么设置)

    华为关机闹钟还会响吗(华为关机闹钟还响吗怎么设置)

  • oppopbam00是什么型号(oppo手机pbbm00是什么型号)

    oppopbam00是什么型号(oppo手机pbbm00是什么型号)

  • powerpoint的扩展名(ppt扩展功能)

    powerpoint的扩展名(ppt扩展功能)

  • 荣耀畅享5x能放电信卡吗(荣耀畅想5x)

    荣耀畅享5x能放电信卡吗(荣耀畅想5x)

  • 加入抖音公会后,可以退出吗(加入抖音公会后不播了会怎么样)

    加入抖音公会后,可以退出吗(加入抖音公会后不播了会怎么样)

  • airpods充电盒怎么充电(airpods怎么改名)

    airpods充电盒怎么充电(airpods怎么改名)

  • 华为体脂秤怎么连接手机(华为体脂秤怎么重置)

    华为体脂秤怎么连接手机(华为体脂秤怎么重置)

  • word竖式除号怎么打(word怎么打除法竖式的符号)

    word竖式除号怎么打(word怎么打除法竖式的符号)

  • 华为手机锁屏时间怎么调(华为手机锁屏时步数不显示了)

    华为手机锁屏时间怎么调(华为手机锁屏时步数不显示了)

  • 红米note8pro怎么设置呼吸灯颜色(红米note8pro怎么插双卡)

    红米note8pro怎么设置呼吸灯颜色(红米note8pro怎么插双卡)

  • OPPO k5怎么解除远程守护(oppok5屏锁怎样解)

    OPPO k5怎么解除远程守护(oppok5屏锁怎样解)

  • 怎么在快手直播唱歌(怎么在快手直播间播放电影视频)

    怎么在快手直播唱歌(怎么在快手直播间播放电影视频)

  • 抖音怎么加入拼多多商品(抖音怎么加入拼多多商家)

    抖音怎么加入拼多多商品(抖音怎么加入拼多多商家)

  • 小米4手环能测心率吗(小米4手环能测血氧)

    小米4手环能测心率吗(小米4手环能测血氧)

  • kindle横屏竖屏怎么切换(kindle 横屏)

    kindle横屏竖屏怎么切换(kindle 横屏)

  • Vue实现大文件分片上传,包括断点续传以及上传进度条(vue打包vendor文件过大)

    Vue实现大文件分片上传,包括断点续传以及上传进度条(vue打包vendor文件过大)

  • 装修及室内设计实训报告
  • 农村合作社怎么挣钱
  • 专票上不小心印上字了,怎么去除
  • 生产成本月末有余额怎么结账
  • 个人收到银行承兑汇票
  • 盈余公积补亏为什么未分配利润增加
  • 固定资产丢失
  • 结转周转材料成本分录
  • 同一控制下企业合并取得的长期股权投资
  • 股东出资方式和比例是否合法?并说明理由
  • 收到高新企业补助款分录
  • 固定资产常用计算公式
  • 基建账的年终结转
  • 员工社保异地缴纳
  • 物业公司开停车位费全电发票
  • 未达起征点的增值税要交所得税吗
  • 建筑企业新项目增值税的计算
  • 个体工商户投资者减除费用
  • 注册资本越大越有实力
  • 期末未缴税额是负数用于抵扣如何填报
  • 一般纳税人增值税怎么做账务处理
  • 在建工程印花税计税依据
  • 退票费报销凭证可以在机子上打印吗
  • 增值税普通发票几个点
  • 购买国外技术需要缴纳什么税
  • 虚拟机安装苹果系统全过程
  • 不计入开办费可以吗
  • 企业补充流动资金具体用途
  • uefi系统安装win7gho
  • 进销存功能
  • adb是什么程序
  • Yii2隐藏frontend/web和backend/web的方法
  • deepin 设置
  • 营改增后的增值税税目税率表
  • 什么时候使用多进程
  • php如何读取文件内容
  • 苏门答腊岛海岸线多少
  • 80岁以上老年卡上的钱如何消费
  • 建筑业2021年享受核定征收吗
  • php日期时间函数
  • 人工智能讲解
  • 玄学2021
  • erp面试题目100及最佳答案
  • 待核销基建支出与待摊投资的区别
  • 银行手续费必须有发票才能入账吗
  • sqlite3 top的查询及limit语法介绍
  • 怎么查企业历史
  • 收付转和记账凭证
  • 分公司非独立核算怎么报税
  • 个人建筑安装属于劳务吗
  • 基本户是活期还是定期
  • 增值税税率调整为13%从什么时候开始实行
  • 纳税申报怎么做
  • 其他业务成本借方表示什么
  • 进项税额属于什么会计科目
  • 在建工程二级科目待摊支出
  • 非税收入票据如何开具
  • 结汇时和月底结转汇兑损益
  • 阿拉伯数字转大写函数
  • mysql格式化数值
  • windows的使用
  • 怎么给文件夹设置密码保护
  • win7内存检测工具
  • win8的系统怎么装win7
  • 轻松搞定琥珀甲教程
  • js数组每个元素+1
  • android加载dex
  • Django中login_required装饰器的深入介绍
  • django pypi
  • 数据库的列名是什么
  • 详解linux设备
  • jquery validator
  • 基于python的聊天软件
  • javascript的dom操作
  • 北京国家税务局官网
  • 税务部门立足
  • 河北工伤网上申请流程
  • 进口小麦关税税率是多少
  • 复印店开什么发票
  • 河南旧县为什么叫新县
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设