微信小程序导航栏页面滑动切换
时间:2022-07-25
本文章向大家介绍微信小程序导航栏页面滑动切换,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<view class="banner">
<scroll-view scroll-x="true" scroll-with-animation="true" scroll-into-view="nav-{{select > 0 ? select -1 : select}}">
<view wx:for="{{sortList}}" wx:for-index="index" wx:key="index" id="nav-{{index}}"
class="sort {{index == select ? 'choose' : ''}}" data-index='{{index}}' bindtap="activeTab">
{{item.name}}
<view class="line" wx:if="{{index == select}}"></view>
</view>
</scroll-view>
</view>
<swiper style="height:{{height}}px" current="{{select}}" duration="300" bindchange="activeSw">
<swiper-item wx:for="{{sortList.length}}" wx:key="index">
<view class="box">
<view class="place" wx:for="{{placeList}}" wx:key="index">{{index}}</view>
</view>
</swiper-item>
</swiper>
.banner {
position: sticky;
top: 0;
width: 100%;
height: 80rpx;
background: #fff;
white-space: nowrap;
display: flex;
align-items: center;
padding: 0 30rpx;
box-sizing: border-box;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
z-index: 10;
}
.banner scroll-view {
height: 100%;
}
.sort {
position: relative;
display: inline-block;
font-size: 32rpx;
margin-right: 70rpx;
line-height: 80rpx;
height: 100%;
}
scroll-view .sort:last-child {
margin-right: 0rpx;
}
.choose {
color: #16BA98;
}
.line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5rpx;
border-radius: 10rpx;
background: #16BA98;
animation: spread .3s;
}
@keyframes spread {
0% {
width: 0;
left: 50%;
}
100% {
width: 100%;
left: 0;
}
}
.place {
height: 800rpx;
}
const app = getApp()
Page({
data: {
select: 0,
height: 0,
sortList: [{
name: '电视剧'
},
{
name: '电影'
},
{
name: '综艺'
},
{
name: '少儿'
},
{
name: '动漫'
},
{
name: 'NBA'
},
{
name: '体育'
},
{
name: '财经'
},
{
name: '历史'
},
],
placeList: [1, 2, 3, 4]
},
onLoad() {
this.watchHeight()
},
// 触发tab导航栏
activeTab(e) {
var index = e.currentTarget.dataset.index
this.setData({
select: index
})
this.generalEv()
this.watchHeight()
},
// 滑动swiper
activeSw(e) {
var index = e.detail.current
this.setData({
select: index
})
this.generalEv()
this.watchHeight()
},
// 监听swiper高度
watchHeight() {
var query = wx.createSelectorQuery()
query.select('.box').boundingClientRect((res) => {
this.setData({
height: parseInt(res.height)
})
}).exec()
},
// 初始化值
generalEv() {
this.setData({
placeList: [1, 2, 3, 4]
})
// 回到顶部
wx.pageScrollTo({
scrollTop: 0
})
},
onReachBottom: function () {
var list = this.data.placeList
list.push(1, 2, 3, 4)
this.setData({
placeList: list
})
this.watchHeight()
},
})
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode | 703.数据流中的第K大元素
- springboot开发之配置自定义的错误界面和错误信息
- springboot开发之删除员工
- LeetCode | 1.两数之和
- springboot开发之配置嵌入式Servlet容器两种方式
- jvaa之初始化块
- java之匿名内部类
- springboot配置之获取配置文件中属性的第二种方法(@Value)不同于@ConfigurationProperties
- mybatis动态sql之内置参数_parameter和_databaseId
- Redis | Redis 字符串相关命令
- java之抽象类
- springboot配置之yaml
- properties和yaml配置文件
- java之模板方法设计模式
- java之接口