微信小程序页面滚动时动态更换样式

最新推荐文章于 2024-05-09 17:21:59 发布
最新推荐文章于 2024-05-09 17:21:59 发布
阅读量491 收藏 3
点赞数
文章标签： 微信小程序 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43350941/article/details/126420954
版权

1. 在index.js文件的data中声明参数，这里以动态更换顶部背景颜色为例。

 2. 在index.wxml文件中引用该参数，这里用到了vant-webapp的组件。

 3. 在index.js中写滚动触发的函数事件

 

JeanKarry
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序：随页面滚动渐变的顶部导航组件
haoyanyu_的博客
08-15 2574
需求： 进入页面时，没有导航栏，随着页面向上滚动，滚动条透明度逐渐变清晰，最后全部展示出来。 随着页面向下滚动，导航栏再逐渐消失 思路： 一个fixed定位的导航栏组件，外部传入opacity来控制css属性来控制透明度。 页面使用时，在onPageScroll里用throttle防抖方法在滚动时改变opacity 核心代码： // gradient-bar.js const { SDKVersion, version, statusBarHeight } = wx.getSystemInfoSync();
微信小程序 slider双向滑动渐变色
Young_yaru的博客
05-17 1669
微信小程序 slider双向滑动渐变色 要求： 两个slider组件，第一个slider组件的选择区域为渐变色，未选择区域为灰色；第二个slider组件的选择区域为灰色，未选择区域为渐变色。无论滑动哪一个slider组件，slider的数据是一样的。 效果图 wxml <view class="" wx:elif="{{index==1}}"> <view class="body-view3"> <view cl
微信小程序导航头部吸顶效果
weixin_62639453的博客
03-28 1609
3.将要吸顶元素到页面顶部的高低和页面已经滚动的高度进行对比。当滚动距离大于等于要吸顶元素的高度时，变成吸顶状态；当滚动距离小于要吸顶元素的高度时，取消吸顶状态；功能描述：当页面滚动到该元素的时候，变成固定的导航头部，也就是固定在最上面，当往回滑动时又变成原来的样子。一、首先解决第一点：在页面加载出来时，onload事件中，拿到要吸顶元素到页面顶部的高度。1.获取要吸顶元素到页面顶部的高度。2.监听页面已经滚动的高度。
微信小程序-监听滚动，改变导航样式，点击导航，定位到页面相应为止
最新发布
weixin_45468589的博客
05-09 176
通过block,判断是否点击了导航，如果点击则延时加载滚动。
小程序滚动事件之头部渐隐渐现demo
岁末zzz的博客
01-19 923
效果图: 代码: //test1.wxml <view class='header' style="opacity:{{opacityStyle}}" hidden='{{hiddenModel}}'> 头部 </view> <view class='demo1'>滑动1</view> <view class='demo2'>滑...
微信小程序 导航tabBar切换 滑动效果
孤单的时候狗作陪！的博客
01-16 1065
效果图 .wxml <!-- nav导航 --> <view class="goods"> <block wx:for="{{tab}}" wx:key="key"> <view class="{{item.style}}" bindtap="tarClick" data-index="{{index}}">{{item.titcle}}</view> </block> </view> ..
微信小程序设置滚动条过程详解
10-16
主要介绍了微信小程序设置滚动条过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序顶部栏图片随页面滚动渐变展示隐藏
04-18
小程序顶部通栏，展示图片，随着页面滚动，开始渐变展标题记及纯色吸顶样式 主要使用了小程序中的scroll-view组件，通过滚动时触发 bindscroll和滚动到顶部 bindscrolltoupper改变顶部栏的样式效果 动图效果及使用...
微信小程序scroll-view仿拼多多横向滑动滚动条
01-03
本文实例为大家分享了微信小程序横向滑动滚动条的具体代码，供大家参考，具体内容如下 效果图 实现代码 index.wxml [currentTab].secondList}} scroll-left='0' bindscroll=getleft> <!--内容区域--> ...
微信小程序 bnner滚动实例详解
01-04
微信小程序 bnner滚动 首先是轮播图，autoplay 自动播放，interval 轮播的时间，duration 切换速度，可以根据自己需求去添加。 Delete：是删除按钮，加载进来是隐藏的，需用户点轮播图进去后，轮播图全屏显示才出来...
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
10-17
主要介绍了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能,结合实例形式分析了微信小程序自定义顶部TabBar选项卡页面切换功能的相关布局、样式及功能实现技巧,需要的朋友可以参考下
微信小程序 JS动态修改样式的实现方法
01-03
前言 本文主要介绍了关于微信小程序 JS动态修改样式的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧 先写一个不怎么好看的demo，通过点击事件来控制view的元素属性，把背景改变成蓝色。 是这样的效果： 代码如下： 上一份小代码 index.wxml 属性改变 <button bindtap=tryDriver>测试</button> index.wxss .cont{ height: 15
微信小程序swiper+scroll-view实现滑动切换内容
苏苏就是小苏苏的博客
02-27 7401
1.实现效果 2.实现原理 swiper：滑块视图容器。其中只可放置swiper-item组件，设置不同的swiper-item，通过bindchange事件，动态的改变当前选中项，swiper默认高度为150，必须设置相应高度才可。 scroll-view：包裹整个页面，设置scroll-x或scroll-y，改变滚动的方向。 3.实现代码 <scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scr
uniapp vue3 h5,微信小程序滚动屏幕元素渐入动画&自定义导航栏
qq_39143010的博客
03-12 2169
注意事项： animate.css需要添加样式兼容微信小程序； 微信小程序滚动时boundigClientRect获取不到标签信息 参考官方文档安装使用animate.css
【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件
记录
04-04 1868
如果想修改.page的样式，再用普通的动态class判断改变就可以了。在wxml最外层套一个自己定义的page的class。直接使用下面的写法，是静态的。
微信小程序实现点击改变view背景颜色
热门推荐
liuhaoxin666的博客
04-22 1万+
点击改变view背景颜色 线上效果图，如下： 效果就是点击任一一个，它的背景颜色和字体颜色都会改变 1.布局 我是用循环写的，因为这样比较方便吧，不然还需要设置好几个点击事件，代码如下： <view class="tapgo"> <view style=" background-color: {{item.color}};color: {{item.tcol}};" clas...
微信小程序动态修改page的页面样式
qq_45832807的博客
11-03 7214
微信小程序修改页面的样式的方法： 在wxss页面中直接修改page的样式 这样修改page的样式是静态的 page { background: #F5F5F7; } 通过模拟page动态的修改page标签的样式 wxml中： <view class="page" style="background-color:{{pageBackgroundColor}}"></view> wxss中： 设置自定义page的样式，使之与原生page标签一样 page {
微信小程序使用scroll-view 标签实现内容上下或左右滑动
湾流~ 的博客
09-05 5681
scroll-view标签微信官方介绍 scroll-view标签属性 : scroll-x 为x轴(左右滑动),scroll-y为y轴(上下滑动) 左右滑动 scroll-view标签需要设置white-space: nowrap;里面的元素要设置为行内块元素 html <scroll-view scroll-x > <view class="templateitem" v-for="(item,index) in xxx" style=" width: 200px; heig
微信小程序不换行横项滑动
weixin_40169021的博客
08-17 1347
首先外面得包个scroll-view，然后white-space:nowrap 子集外面得设置 display:inline-block;width:38%
微信小程序 动态禁止页面滚动
05-20
要实现禁止页面滚动的效果，可以通过以下步骤来实现： 1. 在页面的wxml文件中，添加一个view标签，设置class为scroll-view。 2. 在wxss文件中，定义scroll-view的样式，设置overflow为hidden，并设置其宽高等属性。 3. 在js文件中，通过Page()方法定义页面对象，在onLoad生命周期函数中，获取scroll-view元素的高度，并将其设置为页面对象的一个属性。 4. 在onShow生命周期函数中，通过wx.createSelectorQuery()方法获取scroll-view元素，计算出其高度，并更新页面对象的属性。 5. 在onPageScroll事件中，判断页面滚动的距离是否超过scroll-view的高度，如果超过则禁止滚动，否则允许滚动。 下面是示例代码： 在wxml文件中： ```html <view class="scroll-view"> <!-- 页面内容 --> </view> ``` 在wxss文件中： ```css .scroll-view { overflow: hidden; width: 100%; height: 100%; } ``` 在js文件中： ```javascript Page({ data: { scrollViewHeight: 0 }, onLoad: function() { const query = wx.createSelectorQuery() query.select('.scroll-view').boundingClientRect((rect) => { this.setData({ scrollViewHeight: rect.height }) }).exec() }, onShow: function() { const query = wx.createSelectorQuery() query.select('.scroll-view').boundingClientRect((rect) => { this.setData({ scrollViewHeight: rect.height }) }).exec() }, onPageScroll: function(e) { if (e.scrollTop >= this.data.scrollViewHeight) { wx.pageScrollTo({ scrollTop: this.data.scrollViewHeight }) } } }) ``` 以上代码中，通过wx.createSelectorQuery()方法获取scroll-view元素，并在onLoad和onShow生命周期函数中分别计算出其高度并更新页面对象的属性scrollViewHeight。 在onPageScroll事件中，判断页面滚动的距离是否超过scrollViewHeight，如果超过则使用wx.pageScrollTo()方法将页面滚动到scrollViewHeight的位置，即禁止滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值