微信小程序开发实战：两大技巧分享

关于微信小程序如何开发的问题，其实要真正细说的话，需要很长的篇幅。下面我们挑选其中的两个开发内容进行分析，跟大家分享一下小程序开发过程中的锚点以及滚动加载的开发技巧。

1、锚点

以往内<navigator>的url只能是app.json里配置的路由，它只支持查询字符串，不支持hash，所以不能通过链接做锚点。但是，微信平台提供了<scroll-view>，可以利用它来做微信小程序开发锚点，具体实现如下：

wxml文件

    <view>

        <button data-hash="hash1" bindtap="goHash">点击定向hash1</button>

        <button data-hash="hash2" bindtap="goHash">点击定向hash2</button>

    </view>

    <scroll-view scroll-y="true" scroll-into-view="{{toView}}">

        <view id="hash1"></view>

        <view id="hash2"></view>

    </scroll-view>

js文件

    Page({

        data: {

            toView: 'hash1'

        },

        goHash (e) {

            let hash = e.currentTarget.dataset.hash

            this.setData({

                toView: hash

            })

        }

    })

不过，值得注意的是，这种方式下实现的，只能点击按钮，跳转锚点，屏幕滑动到相应锚点，toView属性不会相应改变。

2、滚动加载

微信没有document、window对象，因此在开发小程序时也无法使用onscroll，只能借助微信提供的<scroll-view>，去实现滚动加载。实现如下：

wxml文件

    <scroll-view scroll-y="true" scroll-into-view="{{toView}}" bindscrolltolower=“loadMovies”>

        <view wx:for="{{movies}}" wx:key="index">

            {{item.name}}

        </view>

    </scroll-view>

js文件

    Page({

        data: {

            movies: []

        },

        getMovies () {

            let _self = this

            wx.request({

              url: 'https://......',

              data: {},

              success: function(res) {

                // res.data才是你后端返回的真实数据

                _self.setData({

                    movies: res.data

                })

              }

            })

        },

        loadMovies () {

            // 得到要更新的数据，setData重置movies

        }

    })