首页 > 其他 > 详细

小程序实践项目

时间:2018-01-15 18:02:35      阅读:250      评论:0      收藏:0      [点我收藏+]

首先要根据产品需求画出原型图,需要实现的功能点,模块划分,大致的文件结构大概构思好,不至于踩深坑

1.配置全局 文件 app.json 、app.js 、app.wxss 基本的配置或是函数封装,可参考已封装好的库  xcx-base

 

调用api接口 实现列表数据渲染,实现上拉加载下拉刷新功能

注:小程序中下拉刷新不能和 scroll-view 一起使用,会产生冲突,使用 scroll-view 滚动组件 则放弃上拉刷新功能

 

*  在首次调用加载时显示loading 组件会有良好的用户体验, 根据页数参数判断是第一页的时候将数据直接赋值,否则数据追加赋值,如果当前页数大于等于总页数,则加载完毕

var app = getApp();
var requestUrl = "https://route.showapi.com/255-1";
var page_num = 1;
var page_size =10

getList(){
    if(page_num>=allPage){
      return
    }
    wx.showNavigationBarLoading();    // 顶部栏显示加载
    var that = this;
    wx.request({
      url: requestUrl,
      data: {
        ‘showapi_appid‘:app.globalData.appid,
        ‘showapi_sign‘:app.globalData.apiKey,
        ‘page‘:page_num,
        ‘type‘:app.globalData.tText
      },
      method: ‘GET‘,
      success: function(res){
        // 判断如果是第一页,显示数据,否则追加显示
        if(page_num == 1)
          that.setData({ listData:res.data.showapi_res_body.pagebean.contentlist });
        else
          that.setData({ listData: that.data.jokes.concat(res.data.showapi_res_body.pagebean.contentlist) });
        // 页数加一页
        page_num += 1;
        wx.hideNavigationBarLoading();
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
}    

 

如果列表加载的是图片的话,而且需要点击放大预览的话。可以将数据的src 绑定到容器的 data-imgUrl 自定义属性,绑定点击事件,调用图片预览api 传入当前图片的src

previewImg:function(e){
    console.log(e);
    wx.previewImage({
      // current: ‘String‘, // 当前显示图片的链接,不填则默认为 urls 的第一张
      urls: [e.currentTarget.dataset.imgurl],
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }

 

小程序实践项目

原文:https://www.cnblogs.com/inzaghihao/p/8288084.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!