小程序 页面左右滑动切换

这是一个关于使用微信小程序实现页面滑动切换功能的示例,包含多个区块,每个区块显示不同的内容。页面使用了`scroll-view`组件进行横向和纵向滚动,并结合`swiper`组件实现滑动切换效果。内容部分展示了多项列表,每个列表项包含图标、标题和操作按钮,支持点击跳转。此外,还集成了下拉刷新功能。
摘要由CSDN通过智能技术生成

页面左右滑动切换

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 () {
  
    },
  
   
  })
  

参考博文

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值