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

2018/6/4 22:24:22 1382 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
河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三