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

2018/6/4 22:24:22 2120 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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 小程序里如何把握用户期望

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

  • 微信小程序开发要准备什么资料

    企业商家在准备开发微信小程序的时候,需要针对小程序的申请流程与开发流程,去准备一些必须的资料

  • 提高微信小程序受欢迎程度的几个开发技巧

    当微信小程序开发的方案策划、功能选择等一切尘埃落定,要提高小程序的受欢迎程度,可从一些开发技巧去入手,以升级用户体验来获得用户的喜爱

  • 微信小程序商城的营销如何去打动人心,转化为消费力

    微信小程序的运营与获利,是一个投入到产出的转化过程。如何通过营销去打动消费者的心,让营销的对象

  • 微信小程序怎么用?通过四种方式手把手教会你

    随着小程序的浪潮最近又刮回来了,小编最近也醉心于了解小程序的一系列相关问题,比如怎么使用小程序啊、怎么使用小程序啊、怎么使用小程序啊

  • 定制开发微信小程序商城必须要有的步骤是什么?

    微信小程序商城这一开发模式,是目前最是常见的。大多数企业商家会借助电商模式,或者不完全仿照电商模式,去开发属于企业商家自己的小程序商城平台

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