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

2018-09-28 好点子客服 1

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


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


  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广告投放服务商等互联网业务欢迎来电洽谈。


为您推荐

在线客服
客服电话
微信公众账号