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

2018/6/4 22:24:22 1067 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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 小程序+美容业,有何优势

    过去美容业商家做推广一般以线下实体店送优惠券、派发传单、运用公众号编写文章这几种方式,现在小程序运用到越来越多的行业中

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

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

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

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

  • 谈谈微信小程序电商的起步技巧

    电商商家开发微信小程序做电子商城使用,刚开始可能不如第三方大电商平台那样,能为自己的商城争取到很多客户流量。由于电商小程序是独立的商城

  • 9.8亿流量触手可及,用微信小程序打造生态发展闭

    微信官方第三季度财政报表显示,微信和WeChat合并起来共有9.8亿月活用户,这个数据不仅代表着微信和WeChat拥有着强大的用户流量,也体现出这个平台背后隐藏的商机。因为用户聚集

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

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

最新评论
网友:
发表评论
剩余200/最多输入200
冠军彩票官网 冠军彩票官网 258彩票官网 同城彩票 欢乐城彩票 桔子彩票官网 198彩票充值 好彩客官网 八马彩票充值中心 好彩客官网