小程序直播带货上线_微信小程序完成锚点功用

日期:2021-01-06 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

微信小程序实现锚点功能     作者:£AP︶ㄣOL◢◤LO   这篇文章主要为大家详细介绍了微信小程序实现锚点功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

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

 scroll-view scroll-y
scroll-into-view="{{toView}}"
bindscroll="scrollTopFun"
 scroll-top="{{scrollTop.scroll_top}}"
scroll-with-animation="true"
 !-- 内容 -- 
 view 
 view 
 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 
 !-- 实时停电信息 -- 
 view 
 view wx:for="{{navlist}}" wx:key="{{index}}" 
 view id='{{item.id}}' 
 view 
 view {{item.name}} /view 
 view 
 text /text 
 text 加入关注 /text 
 /view 
 /view 
 view 
 view 
 view /view 
 · text 昨天 /text ·
 view /view 
 /view 
 view bindtap="togglePopup" 
 view 
 view 
 image src='../../images/date.png' /image 
 text :00 /text 
 /view 
 view 电网故障停限电 /view 
 /view 
 view 
 view 
 text 送电时间: /text 
 text :00 /text 
 text 预计 /text 
 /view 
 view 
 text 停电范围: /text 
 text [开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、 /text 
 /view 
 view 
 text 停电区域: /text 
 text 湖南省长沙市开福区 /text 
 /view 
 /view 
 /view 
 /view 
 view 
 view 
 view /view 
 · text 昨天 /text ·
 view /view 
 /view 
 view bindtap="togglePopup" 
 view 
 view 
 image src='../../images/date.png' /image 
 text :00 /text 
 /view 
 view 电网故障停限电 /view 
 /view 
 view 
 view 
 text 送电时间: /text 
 text :00 /text 
 text 预计 /text 
 /view 
 view 
 text 停电范围: /text 
 text [开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、 /text 
 /view 
 view 
 text 停电区域: /text 
 text 湖南省长沙市开福区 /text 
 /view 
 /view 
 /view 
 /view 
 /view 
 /view 
 view 
 没有更多信息了
 /view 
 /view 
 /view 
 /view 
 /scroll-view 
 !-- 导航 -- 
 view wx:if="{{scrollTop.goTop_show}}" !-- 滚动到离顶部一定距离在显示导航按钮 -- 
 view class='navitembtn shadow {{isnavfixed "":"navitembtned"}}' catchtap='navfixedHandleClick' 导航 /view 
 view hidden='{{isnavfixed}}' 
 view catchtap='gotop' 返回顶部 /view 
 view bindtap='clickScroll' data-id="{{item.id}}"
 wx:for="{{navlist}}" wx:key="{{index}}" 
 {{item.name}}
 /view 
 /view 
 /view 

主要用到 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)

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