微信小程序模板之分页滑动栏_网络技术_宿州市腾雀网络科技有限公司

微信小程序模板之分页滑动栏

发布时间 - 2026-01-10 22:57:55 点击率：次

本文实例为大家分享了微信小程序分页滑动栏的具体代码，供大家参考，具体内容如下

功能：

1.分页栏与滑动视图绑定
2.点击分页栏自动滑动到对应视图
3.滑动的到视图对应分页栏自动显示选中样式

效果图

上代码

wxml

<view class="tapNav">
 <view class="{{tabArr.tabCurrentIndex==0?'active':''}}" data-index="0" bindtap="veHandle">分页标签1</view>
 <view class="{{tabArr.tabCurrentIndex==1?'active':''}}" data-index="1" bindtap="veHandle">分页标签2</view>
 <view class="{{tabArr.tabCurrentIndex==2?'active':''}}" data-index="2" bindtap="veHandle">分页标签3</view>
</view>
<swiper id="swiper" indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" bindchange="swiperChange">
 <block wx:for="{{imgUrls}}">
 <swiper-item id="swiper-item">
  <image id="imgae" src="{{item}}" class="slide-image" width="355" height="150"/>
 </swiper-item>
 </block>
 </swiper>

wxss

/*
1.横向排列分页标签
2.每个分页标签各占1/3
*/
.tapNav {
 display: flex;
 flex-direction: row;
}
.tapNav view{
 flex:1;
 width:200rpx;
 height:100rpx;
 text-align: center;
 line-height: 100rpx;
 font-family: "微软雅黑";
}
/*选中样式*/
.tapNav .active {
 color:blue;
 border-bottom:4rpx solid mediumseagreen;
}
#swiper {
 margin-top:40rpx;
}
#swiper image{
 width:100%;
}

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
 // 图片地址
 imgUrls: [
  'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
 ],
 //是否显示面板指示点
 indicatorDots: true,
 //自动播放
 autoplay: true,
 //切换时间间隔
 interval: 2000,
 //滑动时长
 duration: 1000,
 //存放滑动视图的current
 current:0,
 //分页标签class条件判断的值
 tabArr:{
  tabCurrentIndex:0
 }
 },
 //事件处理函数
 //触摸分页标签触发事件
 veHandle:function(e){
 //每个分页标签都设置了data-index,触摸触发事件获取此数值
 //用此数值替换滑动视图的current
 //用此数值替换分页标签class判断的值
 console.log(e.target.dataset.index)
 var currentIndex = e.target.dataset.index
 this.setData({
  current:currentIndex,
  "tabArr.tabCurrentIndex":currentIndex
 })
 },
 //通过滑块视图的current改变触发事件
 swiperChange:function(e){
 //获取视图滑块当前的current
 //用此数值替换分页标签的current的值
 console.log(e.detail.current)
 var swiperCurrent = e.detail.current;
 this.setData({
  'tabArr.tabCurrentIndex':swiperCurrent
 })
 },
 onLoad: function () {
 console.log('onLoad')
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# 微信小程序分页滑动栏 # 微信小程序分页滑动 # 微信小程序滑动栏 # 微信小程序实战之上拉(分页加载)效果(2) # 微信小程序分页加载的实例代码 # 微信小程序云开发实现数据添加、查询和分页 # 微信小程序实现移动端滑动分页效果（ajax） # 微信小程序实现分页加载效果 # 微信小程序实现瀑布流分页滚动加载 # 微信小程序实现下拉刷新和上拉分页效果的方法详解 # 微信小程序之搜索分页功能的实现代码 # 微信小程序实现分页查询详解 # 微信小程序实现本地分页加载 # 分页 # 滑块 # 微软 # 大家分享 # 绑定 # 具体内容 # 时长 # 大家多多 # 各占 # 自动播放 # 应用实例 # indicator # id # autoplay # indicatorDots # dots # swiper # index # data # bindtap

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：laravel怎么隐藏路由

下一篇：中国移动怎么查询自己名下的手机号码【方法】

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：laravel怎么隐藏路由

下一篇：中国移动怎么查询自己名下的手机号码【方法】