小程序顶部tap顶部导航切换,方法二

这是第二种方法,适用于切换页面的展示效果相同时使用

wxml:

<view class="container">
 <view class="nav">
    <view class="navfirst">
    <scroll-view scroll-x="true" class="" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
            <block wx:for="{{number}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
                <view class="nav-item {{currentTab == idx ?'active':''}}" data-curr="{{idx}}"  data-current="{{navItem.title}}" bindtap="switchNav"></view>
            </block>   
        </scroll-view>
        <view class="find" bindtap="show"><imagesrc="https://mp.touhaowanjia.club/attachment/resource/shaixuan.png"/> 筛选</view>
    </view>
    <view class="navlast">
         <view class="search_rig">
          <input type="text" placeholder="输入剧本名字进行搜索"  bindinput='clickSearchinput'value="{{searchinput}}"/>
          <image src="https://mp.touhaowanjia.club/attachment/resource/search.png" bindtap="nameseek" class="sousuo_lef"></image>
        </view>
    </view>
   
 </view>
    <!-- 页面内容 -->
    <view  class="tab-box">
          <swiper current="{{currentTab}}" duration="300" bindchange="switchTab">       
          <view wx:if="{{list.length==0}}" class="nonelist">暂无数据</view> 
        <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8,9,10]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">        
          <view class="list" wx:if="{{list.length!=0}}">
              <view class="black" wx:for="{{list}}" data-id="{{item.id}}" bindtap="todetail">
              </view>   
          </view>
        </swiper-item>
    </swiper>
    </view>
</view>

整理的wxml

这是第二种方法,适用于切换**页面的展示效果相同时**使用
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200612114827923.png)
wxml:

```javascript
<view class="container">
 <view class="nav">
    <view class="navfirst">
    <scroll-view scroll-x="true" class="" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
            <block wx:for="{{number}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
                <view class="nav-item {{currentTab == idx ?'active':''}}" data-curr="{{idx}}"  data-current="{{navItem.title}}" bindtap="switchNav"></view>
            </block>   
        </scroll-view>
   
 </view>
    <!-- 页面内容 -->
    <view  class="tab-box">
          <swiper current="{{currentTab}}" duration="300" bindchange="switchTab">       
          <view wx:if="{{list.length==0}}" class="nonelist">暂无数据</view> 
        <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8,9,10]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">        
          <view class="list" wx:if="{{list.length!=0}}">
              <view class="black" wx:for="{{list}}" data-id="{{item.id}}" bindtap="todetail">
              </view>   
          </view>
        </swiper-item>
    </swiper>
    </view>
</view>

wxss:筛选的一部分,不知道对不对得上

```javascript
/**index.wxss**/
page{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
}
.content2{
  width: 100%;
  height: 80%;
  overflow: scroll;
}
swiper {
  display: block;
  height: 100%;
  }
  
.nav {
  height:180rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #121824;
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
}
.navfirst{
  display: flex;
  flex-direction: row;
}
.navlast{
  background-color:#1B2435;
  padding-left: 3%;
  height:100rpx;
}
.nav-item {
  width: 14%;
  display: inline-block;
  text-align: center;
  height: 100%;
}
.nav-item.active{
  color: #FFF261;
}
.tab-box{
  background:#1B2435;
  height: 100%;
  color: #fff;
  box-sizing: border-box;
  padding-top:190rpx;
}
.tab-content{
  overflow-y: scroll;
}
.find{
width: 20%;
height: 60rpx;
color: #fff;
display: flex;
align-items: center;
margin-top:10rpx;
}
.find image{
  width: 25rpx;
  height: 25rpx;
  margin:10rpx;
}

.search_rig{
  float: left;
  width:85%;
  position: relative;
  height:60rpx;
  margin-top:22rpx;
  font-size: 25rpx;
  background:#fff;
  border-radius: 60rpx;
  color:#A3A3A3;
  padding-left:90rpx;
  line-height: 60rpx;
  }
  
  .search_rig image{
  width:40rpx;
  height:35rpx;
  position: absolute;
  top:16rpx;
  left: 30rpx;
  }
  .list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }