小程序实现锚点滑动效果

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

wxml:


 
 
  {{item.title}}
 
 

 
 
  {{item.cont}}
 
 

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
 })
 }, 

})

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

时间: 2019-09-23

微信小程序实现锚点定位楼层跳跃的实例

微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现 效果图如下: WXML: 微信小程序 scroll-view实现锚点滑动的示例
前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来. 一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去.结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏

微信小程序movable view移动图片和双指缩放实例365bet体育在线官网_365体育投注平台_365在线体育消息

movable-area是微信小程序的新组件,可以用来移动视图区域movable-view.移动方向可选择任何.垂直和平行.可移动区域里包含其他文本.图片.按钮等组件.可移动区域可绑定touchend等事件.movable-view的参数可调整动画效果. 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc

微信小程序滚动Tab实现左右可滑动切换

?微信小程序滚动Tab实现左右可滑动切换 效果: 最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现 为了偷懒,所以数据都通过wx:for遍历重复出来. 说明: 1.设置data-current

微信小程序实现实时圆形进度条的方法示例

前言 最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下 初始状态 点击中间按钮开始绘制 绘制过程 绘制结束 实现思路 建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML365bet体育在线官网_365体育投注平台_365在线体育消息

微信小程序 教程之wxapp 视图容器 view

相关文章: 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view View 视图容器. 示例: flex-direction: row

详解微信小程序 通过控制CSS实现view隐藏与显示

详解微信小程序 通过控制CSS实现view隐藏与显示 实现效果图: 视图365bet体育在线官网_365体育投注平台_365在线体育消息,使用变量控制隐藏类名 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.

微信小程序 wxapp视图容器 view详解

微信小程序 view 视图容器. 示例: flex-direction: row 微信小程序 WXML、WXSS 和JS介绍及详解
前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度?那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ?官方推荐使用的基础标签是块标签,给了作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

微信小程序 实现列表刷新的实例详解

微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看365bet体育在线官网_365体育投注平台_365在线体育消息,详细描述. index.js var url = "

微信小程序 实现listview带字母滑动

微信小程序 实现listview带字母滑动 wxml