小程序实现锚点滑动效果


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 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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
深入了解php4(2)--重访过去
2006/10/09 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Python hashlib模块的使用示例
2020/10/09 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
十月份红领巾广播稿
2014/01/22 职场文书
十一酒店活动方案
2014/02/20 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
小学生新年寄语
2014/04/03 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
邀请函格式范文
2015/02/02 职场文书
遗失证明范文
2015/06/19 职场文书
小学生运动会广播
2015/08/19 职场文书
投资入股协议书
2016/03/22 职场文书