Démo Essay Notes (mini programme) : cliquez sur le contenu de la barre de navigation et faites glisser le bloc d'activité vers la gauche et la droite pour basculer

1. Analysez
   la barre d'état de la mise en page + le bloc de contenu
   à l'aide de la transition :
2. Barre d'état du bloc de page

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 blocs de contenu

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>