微信小程序实现锚点功能


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 相关文章推荐
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
详解Vue底部导航栏组件
May 02 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php魔术变量用法实例详解
2014/11/13 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
js实现登录验证码
2016/12/22 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python opencv调用笔记本摄像头
2019/08/28 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
洗煤厂厂长岗位职责
2014/01/03 职场文书
王老吉广告词
2014/03/20 职场文书
人事经理岗位职责
2014/04/28 职场文书
企业文化标语口号
2014/06/09 职场文书
建筑学专业自荐书
2014/07/09 职场文书
个人创业事迹材料
2014/12/30 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python