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

2018/6/4 22:24:22 761 15
摘要: 关于微信小程序如何开发的问题,其实要真正细说的话,需要很长的篇幅。下面我们挑选其中的两个开发内容进行分析,

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

 

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

        }

    })

 

  


声明:文章"微信小程序开发实战:两大技巧分享"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序商城
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序在哪?有哪些入口?有哪些打开方式

    随着微信小程序功能的不断完善和对外开放程度越来越大,在不知不觉之中,小程序君的入口已经增加到十多个了,用户的体验越来越好了

  • 定制开发微信小程序过程中,有什么问题是必须要解决的?

    做一个微信小程序定制开发项目时,我们要明确一件事情,即做小程序定制开发的过程,不仅是在搭建一个移动化发展平台的过程

  • 浅谈微信小程序的发展空间

    互联网马太效应逐渐凸显,好的互联网产品蒸蒸日上,差的则每况愈下,随着微信生态圈不断完善,大量的企业、商家和用户涌入了微信,那在此情况下的微信小程序有何发展空间呢?

  • 总结微信小程序开发时需要注意的10个常见问题

    微信小程序作为一个不断在被完善的微信产品,当然不可能完全没有缺点,所以,在选择开发小程序之前还是需要好好了解这开发之路有哪些坑是可以

  • 微信小程序商城开发,必须要开发的功能模块有哪些?

    很多行业的企业商家,想要进入到小程序市场中去发展,结合行业的特色后,很多会考虑以小程序商城的形式进入。所以,做微信小程序商城开发

  • 为什么微信小程序也要做软文营销

    说到软文营销,很多人都会想到微信公众号,因为它具有直接的图文编辑与推送的功能。但是,其实微信小程序也可以做软文营销,无论是与公众号关联做

最新评论
网友:
发表评论
剩余200/最多输入200
118彩票官网 同城彩票 测试站点 同城彩票 彩九彩票官网 258彩票官网 盈多多彩票官网 满堂彩 大象彩票官网 28彩票官网