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

  • 拼多多的评论如何删除(拼多多的评论如何置顶)

    拼多多的评论如何删除(拼多多的评论如何置顶)

  • 苹果怎么下载谷歌商店(苹果怎么下载谷歌相机)

    苹果怎么下载谷歌商店(苹果怎么下载谷歌相机)

  • 抖音本场音浪怎么变成本场点赞了(抖音里的音浪)

    抖音本场音浪怎么变成本场点赞了(抖音里的音浪)

  • fig-al00是华为什么型号(华为fig—al00是什么型号)

    fig-al00是华为什么型号(华为fig—al00是什么型号)

  • 拼多多签收多久钱到账(拼多多签收多久后自动确认收货)

    拼多多签收多久钱到账(拼多多签收多久后自动确认收货)

  • 手机关机qq还能自动回复吗(换手机后如何恢复qq聊天记录)

    手机关机qq还能自动回复吗(换手机后如何恢复qq聊天记录)

  • 华为手机连接蓝牙为什么没有声音(华为手机连接蓝牙耳机怎么连)

    华为手机连接蓝牙为什么没有声音(华为手机连接蓝牙耳机怎么连)

  • 美团5元红包商家扣钱吗(美团5元×6个红包对商家有损失吗)

    美团5元红包商家扣钱吗(美团5元×6个红包对商家有损失吗)

  • 安卓手机设置个人热点(安卓的设置在哪里)

    安卓手机设置个人热点(安卓的设置在哪里)

  • 苹果6手机怎么一键加速(苹果6手机怎么清理内存)

    苹果6手机怎么一键加速(苹果6手机怎么清理内存)

  • 荣耀9xpro怎么更换锁屏壁纸(荣耀9x手机怎么更新系统)

    荣耀9xpro怎么更换锁屏壁纸(荣耀9x手机怎么更新系统)

  • 荣耀8xmax多少寸(荣耀8xmax多大英寸)

    荣耀8xmax多少寸(荣耀8xmax多大英寸)

  • 抖音怎么录歌(抖音怎么录歌带歌词)

    抖音怎么录歌(抖音怎么录歌带歌词)

  • 拼多多拼单返现钱在哪里(拼多多拼单返现50元是真的吗)

    拼多多拼单返现钱在哪里(拼多多拼单返现50元是真的吗)

  • pp视频如何退出qq登录(pp视频怎么退出账号)

    pp视频如何退出qq登录(pp视频怎么退出账号)

  • 抖音聊天记录删了还可以恢复吗(抖音聊天记录删除怎么恢复回来)

    抖音聊天记录删了还可以恢复吗(抖音聊天记录删除怎么恢复回来)

  • vivos1电池多大(vivoS1电池多大)

    vivos1电池多大(vivoS1电池多大)

  • 小米9自带手机膜吗(小米自带手机管家)

    小米9自带手机膜吗(小米自带手机管家)

  • 西瓜视频怎么取消收藏(西瓜视频怎么取名字才能吸引人?)

    西瓜视频怎么取消收藏(西瓜视频怎么取名字才能吸引人?)

  • mac和ipad如何互传文件呢?MAC传文件到IPAD方法介绍(macbook怎么和ipad)

    mac和ipad如何互传文件呢?MAC传文件到IPAD方法介绍(macbook怎么和ipad)

  • DeskAdServ.exe是病毒程序吗 DeskAdServ进程是广告吗(deldir.exe是什么)

    DeskAdServ.exe是病毒程序吗 DeskAdServ进程是广告吗(deldir.exe是什么)

  • 【哈士奇赠书活动 - 24期】-〖前端工程化:基于Vue.js 3.0的设计与实践〗(哈士奇新手礼包)

    【哈士奇赠书活动 - 24期】-〖前端工程化:基于Vue.js 3.0的设计与实践〗(哈士奇新手礼包)

  • 艾琳多南堡,苏格兰 (© CBW/Alamy)(wnba艾琳娜多恩)

    艾琳多南堡,苏格兰 (© CBW/Alamy)(wnba艾琳娜多恩)

  • vite配置@别名,以及如何让vscode智能提示路经(vite 配置)

    vite配置@别名,以及如何让vscode智能提示路经(vite 配置)

  • 增值税发票勾选确认后可以撤销吗
  • 补提去年所得税会计分录怎么写
  • 初次购买金税盘一般多少钱
  • 个税app显示退税已完成,怎么没收到钱呢???
  • 土地使用权摊销计入在建工程
  • 商业汇票到期没有收到款
  • 2021小规模免税
  • 属于期间费用抵减项目
  • 如何区分劳务报酬与经营所得
  • 员工造成损失怎么处理
  • 发票认证后1年还能用吗
  • 一般纳税人17%增值税发票按12%核算如何进行账务处理?
  • 抵税更正申报需要多久
  • 印刷专票税率是几个点
  • 资产改变用途的法律规定
  • 财务物料消耗都有哪些
  • 印花税减半优惠政策2019
  • 工业企业成本结转金额怎么确定
  • 自然人税收管理系统扣缴客户端app
  • 企业转让土地使用权交什么税
  • 政府购买缴纳社保吗
  • 现金流量表怎么编制
  • 总公司给子公司打款 如何做凭证
  • 电脑连上WiFi上不了网怎么办?
  • php初学者常见问题和答案
  • 收到短期借款会计分录怎么做
  • executor进程
  • 仙客来养殖方法和注意事项视频
  • 企业退货产生的损失谁承担
  • composer安装不知道这样的主机
  • 工商变更后税务会自动变更吗
  • pythontime模块
  • 弥补亏损的会计分录
  • python多进程间通信
  • Linux sqlite3 基本命令
  • 消费税为什么要除以1减税率推导公式
  • 下列支出计入销售费用账户借方的是
  • 一般纳税人的账务处理分录
  • 一般纳税人预收租金增值税
  • 民办非企业单位什么意思
  • 小企业期间费用包括
  • 设备维修三种形式
  • 用人单位性质怎么填
  • 利润分配未分配利润期末有余额吗
  • 名为股权转让实为房地产转让
  • 为取得借款发生的手续费
  • 收到土地使用权计入什么科目
  • 专票不报销公司查得到吗
  • 一般性企业
  • 对公账户转账给法人怎么做账
  • 收入纳税明细里的收入和实际不符
  • 经营活动产生的现金流量净额越大越好吗
  • 旅客运输服务客体是什么
  • 期间费用是啥
  • 股东股权转让会计分录
  • mysql 5.7.5 m15 winx64安装配置方法图文教程
  • 谈一谈有关阅读的
  • solaris x86软件 sparc 区别
  • win8.1系统安装教程
  • cf游戏截图在哪个文件夹
  • linux系统简介
  • win8搜索框怎么打开
  • opengl画实体
  • 冰球撞人犯规吗
  • 如何做批处理命令
  • cocos2dx引擎
  • bash脚本语言
  • asm/semaphore.h: No such file or directory
  • nodejs web服务器
  • socket客户端发送数据
  • Python遍历文件夹中的图片
  • 微博html代码
  • jquery有自定义选择器吗
  • 辽宁税务遴选
  • 国家税务总局公务员招录公告
  • 天津税务查询电话
  • 合规管理的基本要求
  • 大理市国税局
  • 最近领导故意挑事
  • 新疆税务电子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设