微信小程序点击滚动到指定位置的实现_javascript技巧

来源:脚本之家  责任编辑:小易  

一张图片分成四(n)个区域,各自显示拼成一张图片,可以用background-position指定图片显示的区域。然后再wx.navigateTo跳转到不同的页面。这种方法不太好,但是目前只想出这种www.zgxue.com防采集请勿采集本网。

公司项目要做一个类似微信通讯录导航的效果,点击右侧字母页面滚动到相应位置。

方法一:每篇图文消息地步输入添加原文链接,用户需要点击左下角阅读原文可以跳转到指定网页;方法二:公众号是订阅号的申请认证,开通菜单功能,菜单可以指向你要跳转的网页;公众号是服务号的本身带有

因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息:

1、首先在 index.js中想写逻辑代码。2、其中page里面的data里面是前台展示时的一些数据,而onload里面是调用的接口。3、调用的方式为get调用,返回的数据存在res里面。4、返回的数据,而data中

let query = wx.createSelectorQuery().in(this);query.selectViewport().scrollOffset()query.select("#Nav").boundingClientRect();query.select("#FilterNav").boundingClientRect();query.select("#"+((letter=='#')?'other':letter)).boundingClientRect();query.exec(function (res) { let scrollTop = 0; if(res[3]){ scrollTop = res[0].scrollTop + res[3].top }else{ scrollTop = res[0].scrollTop; } wx.pageScrollTo({ scrollTop: scrollTop - res[1].height - res[2].height, duration: 300 });});

;}} z-index:999;' bindtap='changColor' data-index='{{index}}'>{{item}} changColor:function(e){ this.setData({ key:e.target.dataset.index }) },

解释一下该代码的意思:

小程序api提供的/打开地图wx.openLocation({longitude:Number(longitude),latitude:Number(latitude),name:name,address:address,scale:1

1.先创建节点对象,wx.createSelectorQuery()返回一个对象实例;

这里还是建议各位开发者,把精力真正来的放在产品上,不要一味的盯着着微源信的传播优势和平台优势。小程序由于门槛较低,竞争的激烈程度将远超iOS和Android。Web发展这么多年,积累的大量前端

2.选择显示区域;

3.调用select方法,传入节点的id值,可在同一节点对象进行多次调用,最后会返回数组结果(上图中滚动区域距离页面顶部是有两个导航栏高度的距离的,所以查询了两次导航栏);

4.exec()回调方法中可以获取所查询所有节点的信息,数组第一条为页面的位置信息(滚动距离),获取到对应字母节点的top值为节点相对于屏幕顶部的位置

结果:页面滚动位置 = 页面滚动距离 + 字母节点相对屏幕高度距离 - 头部导航条高度 - 菜单栏高度

wx.pageScrollTo()调用API页面滚动

如果是让滚动容器滚动到指定位置,计算位置会有一点不同:

var query = wx.createSelectorQuery().in(this);query.select("#swiper").boundingClientRect();query.select("#"+ letter).fields({ rect:true,scrollOffset:true });query.selectViewport().scrollOffset()query.exec((res)=>{ _this.setData({ letterScrolltop: res[1].top - res[0].top })});

上图因为是弹出框里的内容,所以列表放在scroll-view滚动容器中,和上面不一样的是滚动位置是:滚动容器距离页面顶部距离 - 锚点距离页面顶部距离,将计算后的偏移量修改至对应scroll-view容器的scroll-top属性就行了。

到此这篇关于微信小程序点击滚动到指定位置的实现的文章就介绍到这了,更多相关小程序点击滚动到指定位置内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

很简单 再view 标签 里添加id属性 内容为(假设)id='list-{{index}}'(理由:id属性不能已数字开头。scroll-view 的 scroll-into-view属性再js里动态修改。js中,知道下标index,就可以更改scroll-into-view的值。然后就可以点击跳转了。同样的方法,通讯录右侧的英文字母导航也可以这样实现内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信小程序页面滚动到指定位置代码实例
  • 微信小程序实现定位及到指定位置导航的示例代码
  • 利用百度地图api获取当前位置信息的实例
  • 微信小程序注册60s倒计时功能 使用js实现注册60s倒计时功能
  • 基于javascript实现判断移动终端浏览器版本信息
  • 利用javascript脚本实现滚屏效果的方法
  • h5手机端多文件上传预览插件
  • js 省地市级联选择
  • electron制作仿制qq聊天界面的示例代码
  • javascript实现带下拉子菜单的导航菜单效果
  • js实现提示效果弹出及延迟隐藏的功能
  • javascript jmap类定义与使用方法示例
  • 微信小程序如何使用scroll-into-view中跳转到指定位置
  • 微信小程序怎么实现点击图片不同位置跳转不同页面
  • 微信自定义菜单中,要填写的小程序路径是什么?
  • 微信小程序 按钮点击复制
  • 微信小程序可以设置点击图片打开链接吗?怎么设置点击图文打开下一页?
  • 微信小程序给了后台接口,前端怎样调用
  • 微信小程序怎么给for循环的view点击时添加样式
  • 微信小程序 地图多个markers怎么赋值
  • 微信小程序邀请码申请,庞大野心的第一步?
  • 微信怎么定时发信息发图,或者有什么软件可以,小程序就算了
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascript微信小程序页面滚动到指定位置代码实例微信小程序实现定位及到指定位置导航的示例代码利用百度地图api获取当前位置信息的实例微信小程序注册60s倒计时功能 使用js实现注册60s倒计时功能基于javascript实现判断移动终端浏览器版本信息利用javascript脚本实现滚屏效果的方法h5手机端多文件上传预览插件js 省地市级联选择electron制作仿制qq聊天界面的示例代码javascript实现带下拉子菜单的导航菜单效果js实现提示效果弹出及延迟隐藏的功能javascript jmap类定义与使用方法示例js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包javascript点击按钮后弹出透明浮动层的方性能优化之代码优化页面加载速度微信小程序实现渐入渐出动画效果浅谈javascript的闭包函数简谈创建react component的几种方式浅谈javascript中object与function对象js实现select下拉框选择javascript 事件冒泡简介及应用javascript获取隐藏dom的宽高 具体实现js动态创建、删除表格示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved