随笔小记demo(小程序篇) 之 点击导航栏内容及活动块左右滑动切换

1. 分析页面布局
   状态栏 + 内容块
   利用transtion 进行:
2. 页面块之状态栏

wxml

<view class="navbox navbox-{{activeId}}">
	<block wx:for="{{navList}}" wx:key="index">
		<view bindtap="bindViewTap" class="{{activeId==index?'active':''}}" data-index="{{index}}">标签</view>
	</block>
</view>

js

 bindViewTap: function(e) {
    const index=e.currentTarget.dataset.index;
    this.setData({activeId:index})
  },

wxss

.navbox {
  width:100%;
  display: flex;
  flex-shrink: 0;
  height:100rpx;
  position:relative;
  background:#fff;
}
.navbox view {
  width: 20%;
  line-height: 100rpx;
  text-align: center;
}

.navbox::after{
  content:'';
  width:20%;
  position:absolute;
  left:0;
  height:2rpx;
  background-color: red;
  bottom:2rpx;
  transition: all 0.4s;
}

.navbox view.active{
  color:#cafede;
}

.navbox-0::after{
  left:0;
}
.navbox-1::after{
  left:20%;
}
.navbox-2::after{
  left:40%;
}
.navbox-3::after{
  left:60%;
}
.navbox-4::after{
  left:80%;
}
	

3 内容块

wxs

  
.page-content{
	width:100%;
	height:calc(100% - 100rpx);
	overflow-x:hidden;
}

.page-content-move{
	display: flex;
    height: 100%;
    width: 100%;
    flex-direction: row;
    flex-wrap:nowrap;
    transition: all .3s;
    transform: translateX(0);
}

.content{
	width:100vw;
  	height:100vh;
  	flex-shrink: 0;
}

wxml

	<view class="page-content">
		<view class="page-content-move page-content-move-{{activeId}}" style="transform:translateX({{-100 * activeId}}vw)">
					<view class="content" wx:for="{{navList}}" wx:key="index">内容区域{{index}}</view>	
		</view>
	</view>