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

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

容器的官网文档说明:

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

 

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

 

重点 ：

1. 设置 page 的 height : 100%;

2. 设置 scroll-view 容器的高度，例如 height : 100%;

3. 使用 scroll-view 容器做最外层

4. 赋值 scroll-into-view，scroll-into-view="{{toView}}">

5. 一定要给 scroll-view 设置方向属性 scroll-y="true" 

6. 跳转到位置的标记使用 id（定位），例如

 

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

 

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

 

 

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

<view class="list">

    <view bindtap='jumpTo' data-opt="list0">list0view>

    <view bindtap='jumpTo' data-opt="list11">list11view>

    <view bindtap='jumpTo' data-opt="list29">list29view>

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 实现锚点跳转，只需要使用 就能很方便的跳转到改元素的位置。

 

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

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

 

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

 

案例如下：

 

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

 

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