小程序实现锚点滑动效果


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 纠正 cleanWhitespace函数
Mar 11 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
关于vue-router路径计算问题
May 10 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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新手上路(四)
2006/10/09 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php url路由入门实例
2014/04/23 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP实现八皇后算法
2019/05/06 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python实现海螺图片的方法示例
2019/05/12 Python
简单了解python变量的作用域
2019/07/30 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
施工安全协议书
2013/12/11 职场文书
开工典礼策划方案
2014/05/23 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android