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

2018/6/4 22:24:22 1347 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(高生)
在线留言:
微信扫码,关注我们
相关文章
  • 实体企业如何以小程序打通线上线下壁垒

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

  • 微信小程序注申请册时的名称设置规范

    微信小程序面世即将到一年之期,这一年之中,微信官方对小程序的建设与开发也在没有停过,面对不断完善的微信小程序,也越来越多的人愿意去

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

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

  • 微信小程序开发常见问题(一)

    微信小程序开发所遇到的问题,可能是基础性的,也可能是比较难以攻克的问题。对于开发新手来说,可能遇到的更多是基础性的问题。本文就总结些类似的问题及其解决方法或者答案

  • 微信小程序商城开发能给传统企业带来什么

    在当下电商行业迅猛发展、互联网对人们生活的渗透更加深入的时候,传统行业所承受的生存压力就越来越大,迄需根据时代的发展与改变,做出自己的发展战略调整

  • 小程序于教育类企业而言有什么作用

    目前,教育行业的“马太效应”愈发明显,无论是大型企业、中型企业还是小型的教育培训机构,都面临着不同程度的增长问题

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