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

微信小程序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);
}