微信小程序实现锚点功能


Posted in Javascript onNovember 20, 2019

“锚点”功能在实际应用设计的好,可以提高用户体验。今天碰到一个类似下面功能:

微信小程序实现锚点功能

由于页面数据比较多,除了做些上拉加载,下拉刷新等优化。还可以进行进行分类,如上图。功能要求:点击导航的菜单,相应页面的分类内容滑动到页面顶部。由于微信小程序页面无dom操作,改功能改如何操作呢?

一开始想到 wx.pageScrollTo(Object object) 这个API,由于每个点击每个导航利用wx.pageScrollTo滚动到相应分类的scrollTop不能确定,所以放弃了。

后发现 scroll-view 组件 的属性 scroll-into-view 可以利用一下:

<scroll-view scroll-y
scroll-into-view="{{toView}}"
bindscroll="scrollTopFun"
style='height:100vh'
scroll-top="{{scrollTop.scroll_top}}"
scroll-with-animation="true"
>
<!-- 内容 -->
<view class='bg-white m-t10'>
 <view class='flex'>
 <view class='flex-1 f16 p-v text-center {{currentId === index? "active":""}}'
 data-id="{{index}}" bindtap='navHandleClick'
  wx:for="{{navietm}}" wx:key="{{index}}">{{item}}</view>
 </view>
 
 <view class='has-padding-sm'>
 <!-- 实时停电信息 -->
 <view>
  <view class='m-t10' wx:for="{{navlist}}" wx:key="{{index}}">
 
  <view class='itembox' id='{{item.id}}'>
   <view class='titlebox flex'>
   <view class='flex-1 text-ellipsis'>{{item.name}}</view>
   <view class='f12'>
    <text class='icon icon-like-o inline-middle'></text>
    <text class='inline-middle m-l5'>加入关注</text>
   </view>
   </view>
 
   <view class='itemconbox'>
   <view class='flex c9'>
    <view class='line m-r5 flex-1 self-middle'></view>
    ·<text class='p-w-sm'>昨天</text>·
    <view class='line m-l5 flex-1 self-middle'></view>
   </view>
 
   <view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
    <view class='border-line-b flex text-bold p-t5 p-b5'>
    <view class='flex-1'>
     <image src='../../images/date.png' class='ico-date inline-middle'></image>
     <text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
    </view>
    <view>电网故障停限电</view>
    </view>
    <view class='p-w-sm p-v-sm'>
    <view>
     <text class='text-bold m-r10 c-11A99A'>送电时间:</text>
     <text class='f12 c6'>2018-09-13 16:15:00</text>
     <text class='label bg-A5A5A5'>预计</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停电范围:</text>
     <text class='f12 c6'>[开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停电区域:</text>
     <text class='f12 c6'>湖南省长沙市开福区</text>
    </view>
    </view>
   </view>
   </view>
 
   <view class='itemconbox'>
   <view class='flex c9'>
    <view class='line m-r5 flex-1 self-middle'></view>
    ·<text class='p-w-sm'>昨天</text>·
    <view class='line m-l5 flex-1 self-middle'></view>
   </view>
 
   <view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
    <view class='border-line-b flex text-bold p-t5 p-b5'>
    <view class='flex-1'>
     <image src='../../images/date.png' class='ico-date inline-middle'></image>
     <text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
    </view>
    <view>电网故障停限电</view>
    </view>
    <view class='p-w-sm p-v-sm'>
    <view>
     <text class='text-bold m-r10 c-11A99A'>送电时间:</text>
     <text class='f12 c6'>2018-09-13 16:15:00</text>
     <text class='label bg-A5A5A5'>预计</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停电范围:</text>
     <text class='f12 c6'>[开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、</text>
    </view>
    <view>
     <text class='text-bold m-r10 c-11A99A'>停电区域:</text>
     <text class='f12 c6'>湖南省长沙市开福区</text>
    </view>
    </view>
   </view>
   </view>
 
  </view>
 
  </view>
  <view class='text-center p-t10 f12 c9'>
  没有更多信息了
  </view>
 </view>
 
 </view>
 
</view>
</scroll-view>
 
<!-- 导航 -->
<view class='nav-fixed' wx:if="{{scrollTop.goTop_show}}"> <!-- 滚动到离顶部一定距离在显示导航按钮 -->
 <view class='navitembtn shadow {{isnavfixed ? "":"navitembtned"}}' catchtap='navfixedHandleClick'>导航</view>
 <view class='navconbox' hidden='{{isnavfixed}}'>
 <view class='floor gotop' catchtap='gotop'>返回顶部</view>
 <view class='floor' bindtap='clickScroll' data-id="{{item.id}}"
  wx:for="{{navlist}}" wx:key="{{index}}">
  {{item.name}}
  </view>
 </view>
</view>
Page({
 data: {
 isnavfixed:true, //是否显示浮动导航
 toView:'', //显示区域
 navlist: [//地区数据
  {
  id:"list0",
  name:'市区河东'
  },
  {
  id: "list1",
  name: '市区河西'
  },
  {
  id: "list2",
  name: '长沙县'
  },
  {
  id: "list3",
  name: '望城区'
  },
  {
  id: "list4",
  name: '浏阳市'
  },
  {
  id: "list5",
  name: '宁乡市'
  }
 ],
 scrollTop: {//竖直滚动的位置
  scroll_top: 0, 
  goTop_show: false
 }
 },
 navfixedHandleClick(){
 // 浮动导航
 this.setData({
  isnavfixed: !this.data.isnavfixed
 });
 },
 scrollTopFun: function (e) {
 // 页面滚动到一定位置显示导航
 if (e.detail.scrollTop > 200) {
  this.setData({
  'scrollTop.goTop_show': true
  });
 } else {
  this.setData({
  'scrollTop.goTop_show': false
  });
 }
 },
 gotop(){
 //返回顶部,
 var _top = this.data.scrollTop.scroll_top;
 _top == 1 ? _top = 0 : _top = 1
 this.setData({
  'scrollTop.scroll_top': _top,
  'isnavfixed':true
 });
 console.log(this.data.scrollTop);
 },
 clickScroll: function (e) {
 //点击导航菜单滚动
 var toView = e.currentTarget.dataset.id
 this.setData({
  "toView": toView,
  'isnavfixed': true
 })
 }
})

主要用到 scroll-view 组件  scroll-into-view  属性;当点击导航菜单的时候,我们改变相应的 scroll-into-view 的值,并且同时需要在  scroll-view 组件内相应位置处的子元素上定义相应的 id;因为scroll-into-view 值应为某子元素 id,设置哪个方向可滚动,则在哪个方向滚动到该元素。

scroll-view 组件使用的一些注意点:

  1. scroll-into-view  与 上面提到的子元素id 不能以数字开头

  2.bindscroll 属性 实时监听滚动 ; 如上面 页面滚动到一定位置显示导航按钮功能

  3.scroll-top 、scroll-left 属性: 设置竖向或者横向滚动条位置,如上面 返回顶部 功能

  4.scroll-with-animation 属性:滚动平滑过渡,提高体验

  5.如果需要隐藏 scroll-view 的滚动条使用 css    ::-webkit-scrollbar{width: 0;height: 0;color: transparent;}

  6.如果scroll-view占页面整个高度,可设置 scroll-view的高度 height:100vh , 设置height:100%无效  (vh:相对于视口的高度。视口被均分为100单位的vh

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

Javascript 相关文章推荐
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
js验证账户名是否重复
May 26 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 #Javascript
微信小程序实现时间进度条功能
Nov 17 #Javascript
小程序实现投票进度条
Nov 20 #Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 #Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 #Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 #Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 #Javascript
You might like
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python编程之event对象的用法实例分析
2017/03/23 Python
Python生成随机数组的方法小结
2017/04/15 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python批量获取html内body内容的实例
2019/01/02 Python
python设置环境变量的作用整理
2020/02/17 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
如何开启linux的ssh服务
2013/06/03 面试题
领导干部廉政承诺书
2014/03/27 职场文书
安全生产管理责任书
2014/04/16 职场文书
战略合作协议书范本
2014/04/18 职场文书
安全责任书怎么写
2014/07/28 职场文书
企业党员个人自我评价
2014/09/20 职场文书
检讨书范文
2015/01/27 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers