小程序实现锚点滑动效果


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 Timing
Apr 21 Javascript
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
Vue内部渲染视图的方法
Sep 02 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
php 传值赋值与引用赋值的区别
2010/12/29 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
详解Python多线程下的list
2020/07/03 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
开业庆典活动策划方案
2014/09/21 职场文书
法定代表人证明书
2014/11/28 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
联欢会开场白
2015/06/01 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
源码安装apache脚本部署过程详解
2022/09/23 Servers