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

  • 哪些情形免征契税
  • 进项有留底怎么结转
  • 库存盘盈盘亏要调整吗
  • 深圳一般纳税人资格查询
  • 付款方式分期付款
  • 个人劳务报酬所得税率表
  • 股东无偿借款给公司需要交税吗
  • 出差旅费补助报销明细表需要发票吗?
  • 外地扣缴的个人所得税
  • 企业收到税务局退税分录
  • 物业公司代收水电费会计分录
  • 运输增值税专票含税价怎么算
  • 企业哪些可以抵扣增值税
  • 非居民企业从居民企业取得分红
  • 2017年全国税收收入是多少
  • 辅导期纳税人预缴增值税
  • 收到购货方退回的发票联和抵扣联如何处理?
  • 发票金额与实际付款金额不一致
  • 企业医保分几种
  • 个人所得税申请免税条件
  • 怎么解决百度打不开页面
  • steam打开速度
  • 土地无形资产怎么估值
  • win7鼠标点右键没反应
  • 存出保证金的核算内容
  • 买一个金蝶软件年费多少
  • 2021年8月现在还能去武汉吗
  • 苹果macbook 系统
  • php用户登录用的什么技术
  • Mac怎么更改默认打开方式
  • mac计算器怎么变小
  • 免征的增值税需要纳税调整吗
  • 带息应收票据计息时
  • 工程项目会计怎么样
  • 4月满月是几号
  • 事业单位委托业务费拨付时是否需要发票
  • php 文件传输
  • linux suid
  • 什么是AI工具
  • spring集成xfire
  • 随机梯度下降算法优缺点
  • py转换成exe后打开没用
  • 软件开发服务费税率
  • 融资租赁后续会计处理
  • 退税勾选错了怎么办
  • 商品出入库台账
  • 固定资产一次性扣除如何做账
  • 销项负数发票需不需要增加库存
  • 哪种银行贷款利息最低
  • 织梦如何做提取卡密
  • 织梦怎么导入数据库
  • 上传附报资料是哪些资料
  • 企业报税流程是什么样的
  • 成本核算分摊方法总结
  • 核定征收和查账征收可以自己选择吗
  • 小微企业所得税优惠政策最新2023
  • 无形资产的累计折旧
  • 商场返券计算公式
  • 小规模纳税人减按1%怎么计算
  • 个体户记账报税
  • 培训费做什么会计分录
  • 存出投资款会计处理
  • 工业企业增值税负率一般控制在多少
  • mysql数据库sid
  • 微软公布新企业AI产品定价 股价应声涨至盘中纪录高位
  • win7 管理
  • linux安装软件怎么安装
  • ultra系统优盘恢复
  • win7系统回收站不见了怎么办
  • win8.1怎么关闭防火墙
  • win8系统教程
  • 可以自己做手写的软件
  • nodejs edge
  • angular ...
  • 深入理解新发展理念
  • jQuery+ajax实现实用的点赞插件代码
  • 云南国税app
  • 纳税人欠缴税款怎么办
  • 印花税应税凭证数量是什么意思
  • 佛山退休办理
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设