微信小程序实现锚点功能

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

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

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

(0)

相关推荐

  • 微信小程序 scroll-view实现锚点滑动的示例

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

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

    微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现 效果图如下: WXML: <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"> <view wx:for="{{act_addList}}&

  • 微信小程序实现锚点功能

    "锚点"功能在实际应用设计的好,可以提高用户体验.今天碰到一个类似下面功能: 由于页面数据比较多,除了做些上拉加载,下拉刷新等优化.还可以进行进行分类,如上图.功能要求:点击导航的菜单,相应页面的分类内容滑动到页面顶部.由于微信小程序页面无dom操作,改功能改如何操作呢? 一开始想到 wx.pageScrollTo(Object object) 这个API,由于每个点击每个导航利用wx.pageScrollTo滚动到相应分类的scrollTop不能确定,所以放弃了. 后发现 scrol

  • 微信小程序scroll-view锚点链接滚动跳转功能

    html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w

  • 微信小程序实现锚点定位功能的方法实例

    前言 在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果: 功能实现 采用小程序视图容器组件实现:scroll-view 这里需要注意的是,竖向滚动时,scroll-view需要指定一个固定高度,我们看下WXML代码: <scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}"

  • C#开发之微信小程序发送模板消息功能

    步骤一:获取模板ID 有两个方法可以获取模版ID 通过模版消息管理接口获取模版ID 在微信公众平台手动配置获取模版ID 步骤二:页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息.或者当用户完成支付行为,可以获取prepay_id用于发送模板消息. 步骤三:调用接口下发模板消息 今天重要的说第三步怎么实现,前面的步骤比较简单就略过. ----------------------------

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序实现的涂鸦功能示例【附源码下载】

    本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 布局文件index.wxml: <view class="container"> <!--画布区域--> <view class="canvas_area"> <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作--> &

  • 微信小程序自动客服功能

    微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题.当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案. 整个小程序界面包含2个部分,一部分用于显示回答,一部分为输入框.小程序的核心就是向olami服务器发送http请求,然后处理结果并显示出来.olami接口的详细使用方法可以参考置顶的两篇博客.处理输入的代码如下: bindInput: function (e) { var that = this; var

  • 微信小程序实现多选功能

    本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下 代码: <!--hotblood_gongkao/pages/answer/answer.wxml--> <!-- content --> <view class='answer-list'> <view class='answer-child'> <text class='answer-title'><text style='margin-right:28rpx;

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击

  • 微信小程序拍照和摄像功能实现方法示例

    本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后

随机推荐