小程序智能客服系统_小程序完成锚点滑动效果

2021-01-07 11:00 jianzhan
小程序实现锚点滑动效果       这篇文章主要为大家详细介绍了小程序实现锚点滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

要在小程序中实现锚点的话,就要用到 scroll-view 标签中的,scroll-into-view,详情可见

wxml:

 view 
 scroll-view scroll-y scroll-into-view="{{toView}}" scroll-with-animation="true" 
 block wx:for="{{tabList}}" wx:key="" 
 view class='item-tab {{item.checked "item-act":""}}' id="t{{index}}" data-index="{{index}}" bindtap='intoTab' {{item.title}} /view 
 /block 
 /scroll-view 
 scroll-view scroll-y 
 scroll-with-animation="true" 
 bindscrolltoupper="upper" 
 bindscrolltolower="lower" 
 bindscroll="scrollRight" 
 scroll-into-view="{{toViewRt}}" 
 block wx:for="{{contList}}" wx:key="" 
 view id="t{{index}}" {{item.cont}} /view 
 /block 
 /scroll-view 
 /view 

wxss:

.scroll-box{display: flex;flex-wrap: nowrap;}
.menu-tab{
 width: 180rpx;
 text-align: center;
 height: 100%;
 color: #666;
 border-right:1rpx solid #999
.item-tab{
 font-size:28rpx;
 padding:8rpx;
.cont-box{
 border-top: 1px solid;
 box-sizing: border-box;
.item-act{
 background: linear-gradient(to bottom right, #6C53B1 , #8B2EDF);
 color: #fff;
 border-radius: 100px;
}

js:

var app = getApp();

let _top = e.detail.scrollTop; let progress = parseInt(_top / this.data.ht); // 计算出 当前的下标 if (progress this.data.current) { // 向上拉动屏幕 this.setData({ current: progress }); this.forTab(this.data.current); } else if (progress == this.data.current) { return false; } else { // 向下拉动屏幕 this.setData({ current: progress == 0 0 : progress-- this.forTab(progress); onLoad: function (options) { console.log(this.data.tabList) // 框架尺寸设置 wx.getSystemInfo({ success: (options) = { var wd = options.screenWidth; // 页面宽度 var ht = options.windowHeight; // 页面高度 this.setData({ wd: wd, ht: ht }) onShow: function () { // 初始化状态 this.setData({ toView: 't' + this.data.current, toViewRt: 't' + this.data.current })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。