微信小程序swiper和scroll-view的實例

效果展示

沒錯就是今曰頭條

wxml

<view >
    <view class="menu-scroll">  <!--滾動條全部着色要在上一層設置-->
        <scroll-view scroll-x >
            <view class="scroll-item">
                <navigator url="" bindtap="news1">社會新聞</navigator>
                <navigator url="" bindtap="news2">國際新聞</navigator>
                <!-- 這種方法雖然直觀，但是代碼冗雜，故采用下面的方法 -->
                <navigator url="" data-nav='2' bindtap="news">國內新聞</navigator>
                <navigator url="" data-nav='3' bindtap="news">娛樂新聞</navigator>
                <!--也可以加上選中效果-->
                <navigator url="" data-nav='4' bindtap="news" class="{{currentTab==4?'sel':'menu-scroll'}}">體育新聞</navigator>
                <navigator url="" data-nav='5' bindtap="news" class="{{currentTab==5?'sel':'menu-scroll'}}">科技新聞</navigator>
                <!--注意三目運算符中類的名稱要帶引號，判斷不帶-->
                <!--但是現在只能通過導航欄改變輪播圖的內容，輪播圖改變不能切換導航欄選中狀態，可加入swiper的屬性bindchange實現此功能-->
            </view>
        </scroll-view>
    </view> 
    <view>
        <swiper current="{{currentTab}}" bindchange="change">
            <swiper-item>
                <view class="view1">社會新聞</view>
            </swiper-item>
            <swiper-item>
                <view class="view2">國際新聞</view>
            </swiper-item>
            <swiper-item>
                <view class="view1">國內新聞</view>
            </swiper-item>
            <swiper-item>
                <view class="view2">娛樂新聞</view>
            </swiper-item>
            <swiper-item>
                <view class="view1">體育新聞</view>
            </swiper-item>
            <swiper-item>
                <view class="view2">科技新聞</view>
            </swiper-item>
        </swiper>
    </view>
</view>

js

下面是js中data部分代碼和綁定事件

data: {
        currentTab:0
    },
    /*修改要用專門的方法，setData默認有this，在小括號內傳入對象*/ 
    news1:function(){
        this.setData({  
            currentTab:0    
        })      
    },
    news2:function(){
        this.setData({  
            currentTab:1   
        })      
    },
    /*改進后*/
    news:function(event){
        this.setData({  
            currentTab:event.currentTarget.dataset.nav  
        }) 
    },
    change:function(event){
        this.setData({
            currentTab:event.detail.current
        })
    },

wxss

.menu-scroll{
    background-color: rgb(196, 240, 255);
}
.scroll-item{
    display: flex;
    white-space: nowrap;
    font-size: 30rpx;
    height: 60rpx;
    line-height: 60rpx;
}
.scroll-item navigator{
    font-weight: bold;
    margin: 0px 8px;
}
.view1{
    width: 100%;
    height: 800rpx;
    background-color: red;
}
.view2{
    width: 100%;
    height: 800rpx;
    background-color: gray;
}
.sel{
    background-color: rgb(250, 239, 93);
    color: rgb(138, 139, 139);
}