tab切换效果

 

该dome仅供参考:

免费项目dome包在文章最底部

html

<view class="mg_bo">
	<view class="bg_bo">
		<view class="content">
			<view class="img_bo" bindtouchstart='moveStart' bindtouchend='moveItem'>
				<view wx:for="{
  {sy_list}}" wx:key="index">
					<view animation="{
  {item.animation}}" class=" img"
						style="width:{
  {item.width}};height:{
  {item.height}};background:{
  {item.background}}; z-index:{
  {item.z_index}};opacity:{
  {item.opacity}};margin-top:{
  {item.margin_top}}"
						bindtap="choose" data-id="{
  {item.id}}" data-item="{
  {item}}" data-index="{
  {index}}">
						<image wx:if="{
  {index==tab_index}}"
							style="width:{
  {item.img_width}};height:{
  {item.img_height}};margin-top:{
  {item.top}}" src="{
  {item.img_}}">
						</image>
						<image wx:else style="width:{
  {item.img_width}};height:{
  {item.img_height}};margin-top:{
  {item.top}}"
							src="{
  {item.img}}"></image>
						<view class="text_w"
							style="  font-size: {
  {item.font_size}};color:{
  {item.color}};margin-top:{
  {item.text_top}}">
							{
  {index+1}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>

css:

.mg_bo {
  margin: 46rpx 25rpx 30rpx 25rpx;
}

.mg_bo .bg_bo {
  background: #fff;
  position: relative;
 border-bottom-left-radius: 20rpx;
 border-bottom-right-radius:20rpx ;
}


.mg_bo .bg_bo .page_bg {
  width: 100%;
  position: absolute;
  top: -20rpx;
  z-index: 1;
}

.mg_bo .bg_bo .content {
  position: relative;
  z-index: 2;
}

/*  */
.mg_bo .bg_bo .content .ck_text {
  font-size: 40rpx;
  font-family: PingFang SC;
  font-weight: 600;
  color: #222426;
  width: 100%;
  text-align: center;
  padding-top: 45rpx;
}

.mg_bo .bg_bo .content .ck_tab {
  width: 80rpx;
  height: 40rpx;
  margin-top: 16rpx;
  margin-left: 50%;
  transfo