小程序实现锚点滑动效果


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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
js实现简单的秒表
Jan 16 Javascript
小程序实现密码输入框
Nov 16 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
关于页面优化和伪静态
2009/10/11 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
python中学习K-Means和图片压缩
2017/11/20 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
个人自我剖析材料
2014/09/30 职场文书
未中标通知书
2015/04/17 职场文书
裁员通知
2015/04/25 职场文书
刮痧观后感
2015/06/05 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server