页面左右滑动切换
main.wxml
<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}">
<view class="navigate-item" id="item{{index}}" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" bindtap="tabNav">
<view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view>
<view class="currtline {{currentTab === index ? 'active' : ''}}" wx:if="{{currentTab === index}}"></view>
</view>
</scroll-view>
<swiper indicator-dots="{{false}}" bindchange="handleSwiper" current="{{currentTab}}" class="swiperbody">
<block > <!-- block 1 -->
<swiper-item style="overflow: scroll;" class="swiperbody-item">
<scroll-view scroll-y refresher-enabled refresher-background="#F6F7F8" refresher-triggered="{{isRefresh}}" bindrefresherrefresh="refresherpulling" >
<view class="lifeservice">
<!-- 四项 -->
<view wx:for="{{navSmartLife}}" wx:key="id" data-id="{{item.url}}" bindtap='gotoPage' class="hreflist">
<view class="lefticon">
<image src="{{item.icon}}" ></image>
</view>
<view class="centercontent">
<view class="text-title">
<text>{{item.name}}</text>
</view>
<view class="text-detail">
<text>{{item.name}}</text>
</view>
</view>
<view class="blank">
</view>
<view class="righticon">
<view class="button3" >
查看
</view>
<!-- <image class="hrefimg" src="../image/right.png"/> -->
</view>
</view>
<view wx:for="{{navSmartLife}}" wx:key="id" data-id="{{item.url}}" bindtap='gotoPage' class="hreflist">
<view class="lefticon">
<image src="{{item.icon}}" ></image>
</view>
<view class="centercontent">
<view class="text-title">
<text>{{item.name}}</text>
</view>
<view class="text-detail">
<text>{{item.name}}</text>
</view>
</view>
<view class="blank">
</view>
<view class="righticon">
<view class="button3" >
查看
</view>
<!-- <image class="hrefimg" src="../image/right.png"/> -->
</view>
</view>
<view wx:for="{{navSmartLife}}" wx:key="id" data-id="{{item.url}}" bindtap='gotoPage' class="hreflist">
<view class="lefticon">
<image src="{{item.icon}}" ></image>
</view>
<view class="centercontent">
<view class="text-title">
<text>{{item.name}}</text>
</view>
<view class="text-detail">
<text>{{item.name}}</text>
</view>
</view>
<view class="blank">
</view>
<view class="righticon">
<view class="button3" >
查看
</view>
<!-- <image class="hrefimg" src="../image/right.png"/> -->
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
<block > <!-- block 2 -->
<swiper-item style="overflow: scroll;" class="swiperbody-item">
<scroll-view scroll-y refresher-enabled refresher-background="#F6F7F8" refresher-triggered="{{isRefresh}}" bindrefresherrefresh="refresherpulling" >
<view class="lifeservice">
<!-- 四项 -->
<view wx:for="{{navLbList}}" wx:key="id" data-id="{{item.url}}" bindtap='gotoPage' class="hreflist">
<view class="lefticon">
<image src="{{item.icon}}" ></image>
</view>
<view class="centercontent">
<view class="text-title">
<text>{{item.name}}</text>
</view>
<view class="text-detail">
<text>{{item.name}}</text>
</view>
</view>
<view class="blank">
</view>
<view class="righticon">
<view class="button3" >
查看
</view>
<!-- <image class="hrefimg" src="../image/right.png"/> -->
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
<block > <!-- block 3 -->
<swiper-item style="overflow: scroll;" class="swiperbody-item">
<scroll-view scroll-y refresher-enabled refresher-background="#F6F7F8" refresher-triggered="{{isRefresh}}" bindrefresherrefresh="refresherpulling" >
<view class="lifeservice">
<!-- 四项 -->
<view wx:for="{{navSmartLife}}" wx:key="id" data-id="{{item.url}}" bindtap='gotoPage' class="hreflist">
<view class="lefticon">
<image src="{{item.icon}}" ></image>
</view>
<view class="centercontent">
<view class="text-title">
<text>{{item.name}}</text>
</view>
<view class="text-detail">
<text>{{item.name}}</text>
</view>
</view>
<view class="blank">
</view>
<view class="righticon">
<view class="button3" >
查看
</view>
<!-- <image class="hrefimg" src="../image/right.png"/> -->
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
main.wxss
.lifeservice
{
width: 90%;
margin-left: 5%;
margin-top: 5px;
padding-top: 5px;
}
.hreflist
{
margin: 10px auto;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
width: 95%;
border-bottom: 1px solid rgb(218, 218, 218);
}
.hrefimg
{
width: 20px;
height: 20px;
margin-top: 6px;
}
.lefticon
{
width: 50px;
}
.lefticon image
{
width: 50px;
height: 50px;
}
.centercontent
{
width: 30%;
}
.blank
{
width: 10%;
}
.righticon
{
border-radius: 25px;
height:30px;
width: 20%;
background-color:#EFEFF1;
text-align: center;
}
.button3{
font-family: "等线";
color:#A71E32;
font-size: 16 px;
margin-top: 4px;
font-weight: bolder;
}
.text-title
{
font-size: 15px;
font-weight: bolder;
color: black;
font-family: "等线";
}
.text-detail
{
font-size: 11px;
color:rgb(53, 53, 53);
}
/* 滑动切换样式 */
.scroll-wrapper {
white-space: nowrap;
-webkit-overflow-scrolling: touch;
background: #FFF;
height: 90rpx;
padding: 0 32rpx;
box-sizing: border-box;
margin-top: 20px;
z-index: 3;
width: 90%;
text-align: center;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 10px 5px #d3d1d1;
border-radius: 25px;
}
/* 去掉滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.navigate-item {
display: inline-block;
text-align: center;
height: 90rpx;
line-height: 90rpx;
margin: 0 30rpx;
}
.names {
font-size: 28rpx;
color: #3c3c3c;
}
.names.active {
color: #A71E32;
font-weight: bold;
font-size: 34rpx;
}
.currtline {
margin: -8rpx auto 0 auto;
width: 100rpx;
height: 8rpx;
border-radius: 4rpx;
}
.currtline.active {
background: #A71E32;
transition: all .3s;
}
.swiperbody {
min-height: calc(60vh - 60rpx);
}
.swiperbody-item {
width: 100%;
box-sizing: border-box;
}
scroll-view {
height: calc(40vh - 40rpx);
}
main.js
// pages/another/scroll-x/index.js
Page({
/**
* 页面的初始数据
*/
data: {
isRefresh: false,
currentTab: 0,
tabList: [
{
name: 'tab一'
},
{
name: 'tab二'
}, {
name: 'tab三'
}
]
},
tabNav(e) {
let currentTab = e.currentTarget.dataset.index
this.setData({
currentTab
})
},
handleSwiper(e) {
let {current,source} = e.detail
if (source === 'autoplay' || source === 'touch') {
const currentTab = current
this.setData({
currentTab
})
}
},
handleTolower(e){
wx.showToast({
title: '到底啦'
})
},
refresherpulling() {
wx.showLoading({
title: '刷新中'
})
setTimeout(() => {
this.setData({
isRefresh: false
})
wx.showToast({
title: '加载完成'
})
}, 1500)
},
onLoad: function (options) {
},
onShow: function () {
},
})