位置: 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)

  • homepodmini怎么连接蓝牙(homepodmini怎么连接)

    homepodmini怎么连接蓝牙(homepodmini怎么连接)

  • 苹果手机收到短信不显示特效(苹果手机收到短信怎么看是哪个卡)

    苹果手机收到短信不显示特效(苹果手机收到短信怎么看是哪个卡)

  • 6swifi老说密码错误(6spluswifi老说密码错误)

    6swifi老说密码错误(6spluswifi老说密码错误)

  • 微信群怎么踢人(自己建的微信群怎么踢人)

    微信群怎么踢人(自己建的微信群怎么踢人)

  • 腾讯视频14206.0是怎么回事(腾讯视频14206错误)

    腾讯视频14206.0是怎么回事(腾讯视频14206错误)

  • 全民k歌全屏怎么弄(全民k歌怎样全屏播放)

    全民k歌全屏怎么弄(全民k歌怎样全屏播放)

  • 小米10青春版50倍变焦怎么用(小米10青春版50倍月亮模式)

    小米10青春版50倍变焦怎么用(小米10青春版50倍月亮模式)

  • 闲鱼不发货多久自动取消订单(闲鱼不发货多久自动退货)

    闲鱼不发货多久自动取消订单(闲鱼不发货多久自动退货)

  • 荣耀30s是什么屏幕(华为荣耀30s是什么屏)

    荣耀30s是什么屏幕(华为荣耀30s是什么屏)

  • 用5g手机需要换手机卡吗(用5g手机需要换路由器吗)

    用5g手机需要换手机卡吗(用5g手机需要换路由器吗)

  • cadml是什么命令(cadml怎么用)

    cadml是什么命令(cadml怎么用)

  • 手机锁屏微信消息不显示内容(手机锁屏微信消息没有声音)

    手机锁屏微信消息不显示内容(手机锁屏微信消息没有声音)

  • 苹果怎么设置自定义闹钟铃声(苹果怎么设置自动关机)

    苹果怎么设置自定义闹钟铃声(苹果怎么设置自动关机)

  • 华为折叠屏手机mate x上市了吗(华为折叠屏手机2023款价格)

    华为折叠屏手机mate x上市了吗(华为折叠屏手机2023款价格)

  • 淘宝怎么删自己的差评(淘宝怎么删自己的评论)

    淘宝怎么删自己的差评(淘宝怎么删自己的评论)

  • wps怎样删除指定行(wps怎样删除指定页)

    wps怎样删除指定行(wps怎样删除指定页)

  • 华为gt2可以下载app吗(华为gt2可以下载软件吗)

    华为gt2可以下载app吗(华为gt2可以下载软件吗)

  • vivox21多重(vivoX21多重)

    vivox21多重(vivoX21多重)

  • 拼多多怎么分身(拼多多分身版下载)

    拼多多怎么分身(拼多多分身版下载)

  • 如何知道小米盒子ip(怎么查询小米盒子几代)

    如何知道小米盒子ip(怎么查询小米盒子几代)

  • 5g什么时间民用(5g什么时候可用)

    5g什么时间民用(5g什么时候可用)

  • 手机4g+是什么意思(手机4g+是什么意思怎么切换5g)

    手机4g+是什么意思(手机4g+是什么意思怎么切换5g)

  • m.2接口和sata3区别(m.2接口和sata3接口固态硬盘对比)

    m.2接口和sata3区别(m.2接口和sata3接口固态硬盘对比)

  • 小米9出厂有自带贴膜吗(小米9出厂带膜吗)

    小米9出厂有自带贴膜吗(小米9出厂带膜吗)

  • 王者荣耀中刘邦怎么出装?(王者荣耀中刘邦技能解析以及如何连招)

    王者荣耀中刘邦怎么出装?(王者荣耀中刘邦技能解析以及如何连招)

  • c语言中static如何修饰函数(c 语言 static)

    c语言中static如何修饰函数(c 语言 static)

  • 织梦dedecms 5.7自动给图片添加alt属性的教程(织梦cms官网)

    织梦dedecms 5.7自动给图片添加alt属性的教程(织梦cms官网)

  • 增值税开票软件在哪下载
  • 委托贷款利息收入需要缴纳增值税么
  • 税务师入会与不入会冲突
  • 个人所得税手续费返还时间
  • 差额征税的会计处理方法
  • 发票勾选认证必须对应当期成本吗
  • 增值税纳税申报表模板
  • 资产总额的季度怎么算
  • 一般纳税人公司转让一般卖多少钱
  • 哪些类型的合同无效
  • 企业所得税账务处理
  • 财产行为税计税依据
  • 无形资产账面价值和可收回金额孰低摊销吗
  • 企业助学捐款分录怎么写
  • 公司贷款买车后影响公司收购吗
  • 纳税调整的情况
  • 个人独资企业的所得税税率
  • 房地产企业各个阶段所涉及的税种
  • 清包工和甲供工区别在哪
  • 承兑汇票重复背书
  • 小贷公司贷款的流程是什么
  • 个人公积金公司这178,个人交多少
  • 分公司会有股东吗
  • 认证费计入什么科目
  • 股东投资追加款怎么做账
  • cpu天梯图,最新
  • 联想笔记本在bios中怎么把图标和字变大
  • 固定资产进项发票
  • 赠品没有收到
  • php 字符串函数
  • PHP:pg_escape_string()的用法_PostgreSQL函数
  • php function
  • 年终奖一般发什么奖品
  • 集团公司收到的上级秘密
  • 注册造价师挂靠费如何缴个税?
  • 圣托里尼岛游玩攻略
  • 科技型中小企业享受优惠税收政策
  • 分公司从事研发怎么样
  • 资产负债表的编制方法
  • 真菌感染手指甲空了
  • 怎么配置opencv
  • javascript背景图片怎么导入
  • 简述php操作mysql数据库的基本步骤
  • phpcms栏目分类
  • Fatal error: Call to undefined function mysqli_init() in 路径
  • 税前利润包含
  • 企业的财务报表不包括
  • 差旅费具体包括哪些
  • 综合所得算税公式
  • 收据所得税前扣除
  • 公司购入的财务会计分录
  • 公司购买房子如何交税
  • 小规模纳税人的增值税计入成本吗
  • 盘盈盘亏做好记录这句好怎么说
  • 为什么委托代销业务受托方要反映或有负债
  • 主营业务成本的增加在哪一方
  • 香港公司账户收美元要交税吗
  • 差旅费借贷记账法的会计分录
  • 固定资产的调整科目
  • 其他货币资金属于什么类科目
  • mysql 5.7.28安装
  • win7旗舰版开机
  • win10回收站文件在哪里
  • xp系统开机只有一个鼠标箭头
  • 利用图片密码登录微信
  • windows10快速操作在哪
  • shell随机
  • js中eval函数是干嘛的
  • Node.js中的全局变量有哪些
  • python贪吃蛇游戏代码怎么运行
  • unity3d spine
  • 在shell中获取脚本命令行参数的方法和区别
  • shell编程$1
  • JavaScript onkeydown事件入门实例(键盘某个按键被按下)
  • javascript类库
  • 常用的javascript对象
  • 税务稽查追溯时间是什么意思
  • 河南电子税务局残保金怎么申报
  • 社保扣缴客户端密码
  • 盈利性组织与非盈利性组织公共关系不同之处
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设