好点子网络微信小程序开发实战：两大技巧分享

发布时间：2018-09-28 10:36:01

好点子网络微信小程序开发实战：两大技巧分享

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

　　1、锚点

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

　　wxml文件

　　<view>

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

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

　　</view>

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

　　<viewid="hash1"></view>

　　<viewid="hash2"></view>

　　</scroll-view>

　　js文件

　　Page({

　　data:{

　　toView:'hash1'

　　},

　　goHash(e){

　　lethash=e.currentTarget.dataset.hash

　　this.setData({

　　toView:hash

　　})

　　}

　　})

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

　　2、滚动加载

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

　　wxml文件

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

　　<viewwx: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

　　}

　　})

       好点子网络www.ithdz.com专业技术人员专人专职专注网站优化|网站SEO优化|网站优化推广|佛山网站优化|佛山网站推广|微信朋友圈广告投放|CCTV广告投放服务商等互联网业务欢迎来电洽谈。