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

2018/6/4 22:24:22 1758 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

        }

    })

 

  


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

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

  • 小程序里如何把握用户期望

    在运营小程序的过程中,用户的期望过低或过高都不利于小程序的运营与发展,企业需要把握小程序用户的期望,采取一系列措施来引导用户对小程序产生一个合理的期望值

  • 如何运营才能发挥好微信小程序商城开发的优势

    相信每一个企业商家在开发微信小程序商城的时候,都会想要在让自己的投入得到更多的产出,让开发价值发挥到最大的限度,那么我们如何做,才能

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

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

  • 实体企业如何以小程序打通线上线下壁垒

    随着互联网经济的兴起和发展,实体经济逐渐萎缩,越来越多的实体企业谋求打通线上线下壁垒,寻求新发展

  • 提高用户主动推广小程序,会给企业带来什么?

    一个优质的小程序在线上进行推广时,会有用户转发小程序,给企业做二次推广,那用户推广小程序,会给企业带来什么呢?

最新评论
网友:
发表评论
剩余200/最多输入200