微信小程序 ,列表头滚动的过程中 ,view 悬浮在顶部 ,如何实现这样的一个效果呢??
//indexjs
//获取应用实例
const app = getApp()
Page({
data: {
testData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
testData2: [1, 2, 3, 4, 5, 10],
//是否显示 悬停布局
isshow:false,
//悬浮布局的数据
toptexxt:""
},
onLoad: function () {
},
/
页面加载完成
/
onReady: function () {
},
/
页面滚动监听
/
onPageScroll: function (e) {
//consolelog(e)
let that = this
let query = wxcreateSelectorQuery()
queryselectAll("section-cell")boundingClientRect(function (res) {
consolelog(res)
let size =reslength;
let position = -1;
let topshow = -1000;//根据需求设置大小
let i=0;
//根据 top 的 大小 获取 当前距离顶部最近的view 的下标, 负数最大值 或者是0,
for(i=0;i<size;i++){0
let top = res[i]top;
if(top<=0 && top>topshow ){
topshow = top;
position=i;
}
}
consolelog("当前坐标是 position = "+position)
let isshow =false;
if (res[0]top<0){
if(position==-1) position=0;
isshow = true;
}
thatsetData({
isshow: isshow,
toptexxt: isshowthatdatatestData[position]:""
})
})exec()
},
})
<!--indexwxml-->
<view>
<view class='header'>这里是header</view>
<view hidden='{{!isshow}}'>
<view class= "section-header section-fixed" >这是section-header {{toptexxt}}</view>
</view>
<view wx:for="{{testData}}" wx:key="{{testData}}">
<view>
<view class='section-cell' id='top{{item}}'>{{item}} </view>
<view wx:for="{{testData2}}" wx:key="{{testData2}}">
<view class='section-cell2' id='child{{item}}'>{{item}}</view>
</view>
</view>
</view>
</view>
/indexwxss/
section-placeholder {
background-color: white;
}
section-fixed {
position: fixed;
top: 0;
}
header {
height: 300rpx;
width: 750rpx;
background-color: bisque;
}
section-header {
height: 80rpx;
width: 750rpx;
background-color: rebeccapurple;
}
section-cell {
width: 750rpx;
height:80rpx;
background-color: gold;
margin-top: 2rpx;
}
section-cell2 {
height: 50rpx;
width: 750rpx;
background-color: darkred;
}
效果
实现效果为页面向上滚动隐藏顶部分类菜单,向下滚动则显示顶部菜单,效果图如下所示:
onLoad
onPageScroll
有上翻的动画,有商品展示,有分享,以及跳到视频库。之前网上找了很多,说swiper不能套video,现在已经可以了,第二种是把封面平铺下来,滚动的是封面那种,效果不好
首先用一个cover-view来控制上下滚空,监听touch事件,让swiper的index+1或者-1
swiper包裹这video,swiper不能自动滚动,但是必须要设置衔接的属性。
js里面onshow的那个地方是我们点击tabbar的时候不需要再次调接口,做的处理,如果不是tabbar,可以直接再onload里面调后端数据
注意的是,在开发中,只要不是本地的视频,掉了接口,然后ios的前两个视频就是黑屏,后来加上了custom-cache="{{false}}">就解决了
注意的另一个兼容的是,只有cover-view才能覆盖再原生video之上,像轮播购买记录的那个地方,cover-view不能包swiper,所有有的手机是被视频遮住的
如果不妨到tabbar里的话,就是全屏播放了,头部自定义,然后左右两边也没有黑色没撑满了
下图是小程序 小米Lite 的 Tab 切换效果:切换 Page 时,Tab 下方的指示器(红色横条)是没有滚动效果而是直接闪现到下一个 Page 的,这也是市面上小程序常见的 Tab 切换效果。
原生端 TabLayout 常见的功能就是我们的目标效果,所以 目标效果 如下:
通过了解小程序组件及技术支持,选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。
具体如下图所示 :
主要实现(点击跳转查看源码)
1复制 tab-layout 组件到项目中 (点击跳转至源码 TabLayout 目录)
4在布局文件中使用 TabLayout 组件,并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定
5使用自定义属性 indexAreaHeight 为 Index 及其活动区域设置高度
6使用自定义属性 tabList 设置数据源,根据数据源将自动生成对应数量的 Tab 和 Page
7按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式
布局文件 indexwxml 中:
样式文件 indexwxss 中
布局文件 indexwxml 中
PS: 还有一个很重要的方法 onPageUpdata ,用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据,在子控件中通过 thistriggerEvent("updata") 触发
可能出现问题:
1 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突该如何解决?
在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 (点击跳转查看参考写法)
2当 item-page 或 item-tab 中调用 thissetData ( ) 之后,发现自定义属性 item 获取值为 null
出现该种情况,应在 thissetData ( ) 之后,执行 thistriggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值
3如何实现 " 懒加载 " ,即当 Tab 首次被选中时,才进行对应 Page 的数据加载?
为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ,通过订阅自定义属性 currentIndex ,在 currentIndex 属性变化或组件进行到 attached 生命周期时,通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 (点击跳转查看参考写法)
在小程序越来越普及的现状下,如何使得小程序能给用户带来更完善的显示效果和使用体验,是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度,该组件或许还存在很多瑕疵,如有更好的见解或建议,欢迎留言。
在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面 *** 作与交互性;
<a name="gXpSi"></a>
1、小程序提供的下拉刷新(无法自定义刷新动画)
可能遇到的问题:
1)下拉时没有出现刷新的点点动画
可能是因为设置的页面背景色与点点动画一致导致无法看到动画,可以在页面配置中配置背景文字颜色:
2、scroll-view内refresher-enabled属性开启自定义刷新
基本库要求:2101
官方文档: scroll-view
3、原始scroll-view自定义下拉实现(为兼容2101一下的下拉刷新
通过监听手指移动距离控制需要下拉模块的下拉距离,主要事件bindtouchstart,bindtouchmove和bindtouchend,bindtouchmove记录手指开始下拉时的起始位置,bindtouchmove计算下拉距离,bindtouchend判断并实现刷新方法。
我的自定义下拉组件(Taro框架)
<a name="fEutw"></a>
1、与ios上橡皮筋效果冲突导致下拉无法触发自定义刷新
页面配置 disabledScroll ,禁止页面滚动,同时页面内的列表滚动需要自己再优化调整;
2、scroll-view的scroll问题
需要设定固定高度然后纵向滚动。[我都忘了是啥问题了……
3、页面下拉刷新结束后再滑动列表出现闪屏
在禁止页面橡皮筋效果后,如果页面内存在需滚动区域使用scroll-view效果比view更加流畅;
不设定固定高度不会发生闪屏但是页面滚动非常不流畅;
4、使用官方提供的scroll-view自定义的动画时,当scroll-view内容不足充满一屏时下拉出现问题
将scroll-view设置固定高度后,将其子元素的高度设置多一像素达到隐形撑满的效果。
5、scroll-view内fixed元素问题
ios内scroll-view内fixed元素层级会出现问题,可能出现被遮挡的问题。
6、当页面内局部需要下拉刷新时可能导致内外两个滚动条问题
一个是页面滚动条一个是scroll-view滚动条,由于 *** 作的时候触发的是scroll-view部分的滚动导致页面滚动无法进行从而影响页面其他 *** 作。
Q5和Q6可以合并成一个问题,当页面需要一个吸顶 *** 作时,即滑动距离超过阈值时导航条吸顶的功能,若scroll-view将整个页面包含就会出现Q5的问题,可能导致在ios内吸顶的导航栏无法显示,若scroll-view只包含需要刷新的部分则会出现Q6的两个滚动条的问题。
1)在页面未触发吸顶时禁止scroll-view模块下拉,触发后放开滚动,同时会导致无法下拉。
2)页面滚动触发,scroll-view模块可下拉,但是滚动区域无法滚动,且下拉动画只显示一次。
1、将scroll-view的scroll-y属性设置为false,这样可以禁用scroll-view的纵向滑动功能,避免滑动条出现。
2、在input组件绑定focus和blur事件,当input组件被聚焦时,将scroll-view组件滚动到输入框所在的位置,当input组件失去聚焦时,将scroll-top值设置为0,这样可以让页面回到最顶部。
多级联动菜单在许多的筛选场景应用十分广泛。
先看看效果图:
menuwxml
menuwxss
menujsp
menuwxss
menujs
menuwxml
menuwxss
menujs
这里主要针对一个菜单栏进行详细讲解,其余两个原理相同。
游戏
menuwxml
这里推荐大家使用 <scroll-view></scroll-view> 组件,这样超过限定的高度的话,就可以在内部产生滚动条,整体布局不会乱。使用 <scroll></scroll> 组件的时候,记得要开启滚动的方向(scroll-y表示纵向,scroll-x表示横向),这些属性默认是关闭的。
menuwxss
注意:使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。
menujs
menujs部分主要的难点就是wxml和js之间的数据交互,这里很容易弄晕,尤其是对自己定义的变量弄清楚是什么意思。在这里我画了一个示意图来讲解这个难点。
最后给大家提供该项目的github项目,直接抓下来就可以打开使用,只需对显示的数据进行修改即可。
以上就是关于微信小程序 ,列表头滚动的过程中 view 悬浮在顶部全部的内容,包括:微信小程序 ,列表头滚动的过程中 view 悬浮在顶部、微信小程序页面向上滚动隐藏顶部菜单、微信小程序模仿抖音,全屏播放且有流畅的动画等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)