小程序实现锚点滑动效果


Posted in Javascript onSeptember 23, 2019

要在小程序中实现锚点的话,就要用到<scroll-view > 标签中的,scroll-into-view,详情可见文档

wxml:

<view class='scroll-box' style='height:{{ht}}px;'>
 <scroll-view scroll-y class='menu-tab' scroll-into-view="{{toView}}" scroll-with-animation="true">
 <block wx:for="{{tabList}}" wx:key="">
 <view class='item-tab {{item.checked ? "item-act":""}}' id="t{{index}}" data-index="{{index}}" bindtap='intoTab'>{{item.title}}</view>
 </block>
 </scroll-view>
 
 <scroll-view scroll-y style='height:{{ht}}px;' 
 scroll-with-animation="true" 
 bindscrolltoupper="upper" 
 bindscrolltolower="lower" 
 bindscroll="scrollRight" 
 scroll-into-view="{{toViewRt}}">
 <block wx:for="{{contList}}" wx:key="">
 <view class='cont-box' id="t{{index}}" style='height:{{ht}}px;'>{{item.cont}}</view>
 </block>
 </scroll-view>
</view>

wxss:

.scroll-box{display: flex;flex-wrap: nowrap;}
.menu-tab{
 width: 180rpx;
 text-align: center;
 height: 100%;
 color: #666;
 border-right:1rpx solid #999
 
}
.item-tab{
 font-size:28rpx;
 padding:8rpx;
}
.cont-box{
 border-top: 1px solid;
 box-sizing: border-box;
}
.item-act{
 background: linear-gradient(to bottom right, #6C53B1 , #8B2EDF);
 color: #fff;
 border-radius: 100px;
}

js:

var app = getApp();
 
 
Page({
 data: {
 current: 0, 
 // 左侧菜单
 tabList: [
 { title: 'tab1', checked: true },
 { title: 'tab2', checked: false },
 { title: 'tab3', checked: false },
 { title: 'tab4', checked: false },
 { title: 'tab5', checked: false },
 { title: 'tab6', checked: false },
 
 ],
 // 右侧内容
 contList: [
 { cont: 'tab1'},
 { cont: 'tab2'},
 { cont: 'tab3'},
 { cont: 'tab4'},
 { cont: 'tab5'},
 { cont: 'tab6'},
 
 ],
 },
 
 // 循环切换
 forTab(index) {
 let lens = this.data.tabList.length;
 let _id = 't' + index;
 for (let i = 0; i < lens; i++) {
 this.data.tabList[i]['checked'] = false;
 }
 this.data.tabList[index]['checked'] = true;
 this.setData({
 tabList: this.data.tabList,
 toView: _id,
 current: index
 });
 },
 
 // 点击左侧菜单栏
 intoTab(e) {
 let lens = this.data.tabList.length;
 let _index = e.currentTarget.dataset.index;
 this.forTab(_index);
 let _id = 't' + _index;
 this.setData({
 toViewRt: _id
 });
 },
 
 // 滚动右侧菜单
 scrollRight(e) {
 //console.log(e)
 let _top = e.detail.scrollTop;
 let progress = parseInt(_top / this.data.ht); // 计算出 当前的下标
 if (progress > this.data.current) { // 向上拉动屏幕
 
 this.setData({ current: progress });
 this.forTab(this.data.current);
 } else if (progress == this.data.current) {
 return false;
 } else { // 向下拉动屏幕
 
 this.setData({
 current: progress == 0 ? 0 : progress--
 });
 this.forTab(progress);
 }
 },
 
 onLoad: function (options) {
 console.log(this.data.tabList)
 // 框架尺寸设置
 wx.getSystemInfo({
 success: (options) => {
 var wd = options.screenWidth; // 页面宽度
 var ht = options.windowHeight; // 页面高度
 this.setData({ wd: wd, ht: ht })
 }
 });
 },
 
 onShow: function () {
 // 初始化状态
 this.setData({
 toView: 't' + this.data.current,
 toViewRt: 't' + this.data.current
 })
 }, 
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中ready事件用法实例
Jan 19 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
JS实现数组去重的11种方法总结
Apr 04 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 #Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 #Javascript
node 文件上传接口的转发的实现
Sep 23 #Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 #Javascript
Electron 调用命令行(cmd)
Sep 23 #Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 #Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php实现单链表的实例代码
2013/03/22 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
复习Python中的字符串知识点
2015/04/14 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
python Django批量导入不重复数据
2016/03/25 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python any()函数的使用方法
2019/10/28 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
集体婚礼证婚词
2014/01/13 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书