微信小程序开发 scroll-view 实现锚点标记

微信小程序开发，使用 scroll-view 实现长页面的标记跳转

<scroll-view>容器的官网文档说明:

https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

实现该功能主要使用 <scroll-view> 的 scroll-into-view 属性，但是官方文档中没有这个功能的演示，并且有一些重要的配置官方文档也并没有说明，下文是实际开发中的解决方案。

重点：

设置 page 的 height : 100%;
设置 scroll-view 容器的高度，例如 height : 100%;
使用 scroll-view 容器做最外层
赋值 scroll-into-view，<scroll-view scroll-into-view="{{toView}}">
一定要给 scroll-view 设置方向属性 scroll-y="true"
跳转到位置的标记使用 id（定位），例如 <view id="mark1">

示例简介：实现以下效果，点击右面的导航跳转到左边列表的相应位置。

工程目录中点击鼠标邮件新建 page 页面

-------------- test.wxml 文件代码 --------------

</view>

<scroll-view

scroll-into-view="{{toView}}"

scroll-y="true"

scroll-with-animation="true"

class="scr">

<view

wx:for="{{list}}"

id="{{item}}"

wx:key="*this"

data-rol="{{item}}"

class="test">{{item}}</view>

</scroll-view>

-------------- test.wxss 文件代码 --------------

/* 注意如果不设置 page 会造成跳转无效，另外，如果页面中存在有元素使用 z-index 时，page需要设置 position : relative; 才能响应 */

page{

height: 100%;

}

.scr{

position: relative;

height: 100%;

}

.test{

height: 80rpx;

}

.list{ position: fixed; z-index: 9; top:30rpx; right: 10rpx; }

-------------- test.js文件主要代码 --------------

Page({

data: {

list: ["list0", "list1", "list2", "list3", "list4", "list5", "list6", "list7", "list8", "list9", "list10", "list11", "list12", "list13", "list14", "list15", "list16", "list17", "list18", "list19", "list20", "list21", "list22", "list23", "list24", "list25", "list26", "list27", "list28", "list29"],

toView: 'eeede'

jumpTo : function(e){

// 获取标签元素上自定义的 data-opt 属性的值

let target = e.currentTarget.dataset.opt;

this.setData({

toView : target

})

.....

ps: 如果使用 html 实现锚点跳转，只需要使用 <a href="#element_Id"> 就能很方便的跳转到改元素的位置。

另附 html 页面跳转的几个方法博文

http://blog.csdn.net/this_itboy/article/details/76020658

在生成 list 列表时，还发现了小程序的一个运行机制，就是凡是写在页面主 js 文件中的 js 代码，都会在小程序第一次加载时执行。

案例如下：

该段代码不在 app.js 中而是存在于 test.js 中而且，test 并不是 app.json 中配置的第一个页面

然而在首次加载 index 页面时，我看到 console 中出现了这段代码

微信小程序开发 scroll-view 实现锚点标记

猜你喜欢