微信小程序scroll-view组件实现点击tab横向滚动动画

最新推荐文章于 2022-07-23 11:30:00 发布

阿啾啊

最新推荐文章于 2022-07-23 11:30:00 发布

阅读量2.7k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序动画

本文链接：https://blog.csdn.net/wuyanhong529/article/details/122088624

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.效果图

在这里插入图片描述

2.思路

这个效果其实可以使用swiper组件实现，但是swiper组件必须设置一个固定的高度。

因此这里使用scroll-view组件中的属性scroll-x声明滑动方向为横向，属性scroll-into-view为自动滚动到携带目标id的某个元素，属性scroll-with-animation设置滚动动画过渡。如图所示：

在这里插入图片描述

2.wxml部分

代码如下（示例）：

<view class="swiper_tab">
	<view class="tab_list {{currentTab == 0 ? 'on' : ''}}" data-current="0" bindtap="scrollToView">获奖情况</view>
	<view class="tab_list {{currentTab == 1 ? 'on' : ''}}" data-current="1" bindtap="scrollToView">处分情况</view>
</view>
<scroll-view class="scroll_box" scroll-x="true" scroll-into-view="{{scrollView}}" scroll-with-animation="true">
	<!-- 注意这里的id -->
	<view class="scroll_item" id="toView0" catchtouchmove='catchTouchMove'>
		<table headers="{{awardTableHeader}}" data="{{awardTableData}}" border="{{true}}" />
   	</view>
    <view class="scroll_item" id="toView1" catchtouchmove='catchTouchMove'>
    	<table headers="{{outoTableHeader}}" data="{{outoTableData}}" border="{{true}}" />
    </view>
</scroll-view>

3.wxss部分

代码如下（示例）：

.swiper_tab { 
	width: 100%; 
	margin-bottom: 15rpx;
}
.swiper_tab .tab_list { 
	font-size: 26rpx; 
	display: inline-block; 
	color: #656766; 
	margin-right: 35rpx;
}
.swiper_tab .on { 
	color: #282828; 
	font-size: 29rpx; 
	font-weight: bold;
	 position: relative;
}
.swiper_tab .on::after { 
	position: absolute; 
	content: ''; 
	display: inline-block; 
	width: 80%; 
	height: 8rpx; 
	bottom: -10rpx; 
	left: 50%; 
	transform: translateX(-50%); 
	border-radius: 5rpx; 
	background: #03a57e;
}
.scroll_box { 
	white-space: nowrap;
}
.scroll_item { 
	width: 100%; 
	display: inline-block;
}

4.js部分

Page({
  data: {
    currentTab: 0,
    scrollView: ''
  },
  //  tab切换
  scrollToView: function (e) {
    var i = e.target.dataset.current
    if(this.data.currentTab === i) {
      return false
    } else {
      this.setData({ currentTab: i })
    }
    this.setData({ scrollView: 'toView' + i })
  },
  // 取消scroll-view组件手动滑动
  catchTouchMove: function (e) {
    return false
  }
})