分类 微信开发 下的文章

微信小程序上拉加载,下拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法

方法1

利用”onPullDownRefresh”和”onReachBottom”方法实现小程序下拉刷新上拉加载

设置window中属性enablePullDownRefresh为true
属性 类型 描述
enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数。
设置注册页面中Page中函数
属性 类型 描述
onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onPullDownRefresh: 下拉刷新说明
  1. 监听用户下拉刷新事件。
  2. 需要在config的window选项中开启enablePullDownRefresh。
  3. 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
  4. 4.
代码示例

代码


onPullDownRefresh(){
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在标题栏中显示加载

wx.request({
url: 'https://URL',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}
})

方法2

在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序

属性 类型 描述
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件

Wxml文件

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
    <block wx:for="{{goodsList}}" wx:key="item" >
            <view>
                <image src="{{item.goods_img}}" alt=""></image>
            </view>
            <view>{{item.name}}</view>
            <view><text>¥<text>{{item.price}}</text></text><text>¥{{item.oldprice}}</text></view>
   </block>
</scroll-view>

根据官方文档得知,scroll-view就是里面内容有各种滑动触发事件的DIV容器,比如滚动条滚动、触底、触顶着三个事件。

其中的三个属性 
scroll-top:设置滚动条的位置

scroll-y:是否允许竖向滑动,height:是组件的高度

Bindscrolltolower是绑定触底触发的事件

Bindscroll 是滚动触发的时间

Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件,所以不合适用来当做下拉刷新

一般来说 对于组件的属性,都是通过JS来动态控制的。

js

//获取应用实例
var app = getApp()
//首页上拉加载功能函数
var page = 0;
var url = 'https:www.shop.com/home/index/index
';
var GetList = function(that){
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });
}
Page({
    data: {
        goodsList:[],
        scrollTop : 0,
        scrollHeight:0,
    },
    //下拉刷新
    onPullDownRefresh:function(){
        this.onLoad()
    },
    onLoad: function () {
         var that = this;
            wx.getSystemInfo({
                success:function(res){
                    that.setData({
                        scrollHeight:res.windowHeight
                    });
                }
            });
        //首页商品
        wx.request({
          url: 'https:www.shop.com/home/product/search',
          data: {},
          method: 'GET',
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
},
    //   该方法绑定了页面滑动到底部的事件
    bindDownLoad:function(){
        var that = this;
        GetList(that);
    },
    //   该方法绑定了页面滚动时的事件
    scroll:function(event){
        this.setData({
            scrollTop : event.detail.scrollTop
        });
    },
})

当初次加载页面的时候,执行onLoad函数,

onLoad: function () {
    var that = this;
    wx.getSystemInfo({
        success:function(res){
            that.setData({
                scrollHeight:res.windowHeight
            });
        }
    });
    //首页商品
        wx.request({
          url: 'https:www.shop.com/home/product/search',
          data: {},
          method: 'GET',
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
}

这里的onLoad有两个功能

一、获取设备接口用户手机屏幕高度

二、向服务器发送请求,获取数据

其中,wx.getSystemInfo接口可以获取到手机型号、设备像素比、窗口宽度和高度、设备语言、操作系统版本号和客户端平台,最常用的就是获取设备窗口的宽度和高度。

Wx.request()是发送请求,为了保持良好习惯,需要把请求的数据(GET、POST)都要放在data{}中

小程序封装了一个下拉刷新的API,onPullDownRefresh监听下拉事件,所以

onPullDownRefresh:function(){
    this.onLoad()
},

当下拉事件触发的时候,重新执行onLoad()就可以实现刷新效果了

当下拉事件触发的时候,重新执行onLoad()就可以实现刷新效果了

上拉加载

var page = 0;
var url = app.globalData.domain+'/index.php';
var GetList = function(that){
  that.setData({
      hidden : false
  });
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });  
}
//   该方法绑定了页面滑动到底部的事件
bindDownLoad:function(){
    var that = this;
    GetList(that);
},
//   该方法绑定了页面滚动时的事件
scroll:function(event){
    this.setData({
        scrollTop : event.detail.scrollTop
    });
},

bindDownLoad:每次触底都会触发GetList,去获取数据

Scroll:每次滚动的时候,都重新设置滚动条的位置

var page = 0; 设置当前所请求的页数,这里我请求的方式类似于分别请求

url 请求的url

var GetList = function(){}; 是JS中设置函数的一种方式,先设置一个匿名函数,然后将这个匿名函数赋值给GetList这个变量,相当于这个变量代表了这个函数

wx.request() 发送请求

success 请求成功以后,对数据进行操作

var goodsList = that.data.goodsList; that是调用函数的时候,传递过来的,是this,代表当前页面Page()的实例化对象

that.data.goodsList 就是获取当前goodsList的值

每次执行这个函数的时候,都会page++,然后根据这个page的值去服务器获取数据,将新得到的数据,通过循环push,添加到这个goodsList,然后再通过that.setData覆盖掉原来的goodsList,这样Page中的goodsList就是最新的数据,可以展现在前端页面了。

下拉刷新: 
1.触底,触发时间 
2.调用函数,获取数据 
3.将数据添加到所在页面js中

后端PHP代码:

public function index(){
    $page = I('get.page')?I('get.page'):0;
    $goods_list = D('Goods')->where(array('status'=>1))->limit($page*10,'10')->order('id desc')->select();
    $this->success($goods_list,'',true);
}


微信小程序-原生下拉刷新

小程序中的json文件是配置文件,用来配置小程序页面.

app.json

是对整个小程序的全局配置,我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

app.json
{
  "pages": [
    //注册小程序中的页面
  ],
  "window": {
    //设置小程序的状态栏、导航条、标题、窗口背景色
  },
  "tabBar": {
    //指定 tab 栏的表现,以及 tab 切换时显示的对应页面
  },
  "networkTimeout": {
    //设置各种网络请求的超时时间
  },
  "debug": true//可以在开发者工具中开启 debug 模式
}


page.json//page.json相当于app.json中的window
{
  "navigationBarBackgroundColor": "#ffffff",//导航栏背景颜色
  "navigationBarTextStyle": "black",//导航栏标题颜色,仅支持 black/white
  "navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容
  "backgroundColor": "#eeeeee",//窗口的背景色
  "backgroundTextStyle": "light"//下拉背景字体、loading 图的样式,仅支持 dark/light
  "enablePullDownRefresh": true//是否开启下拉刷新
  "disableScroll": false//设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
}


下拉刷新

  1. 在json文件中配置enablePullDownRefresh为true(app.json中在window中设置enablePullDownRefresh,此效果作用于全局),下面两种设置方法只写一个就行了
app.json
{
 "window": {
   "enablePullDownRefresh":true
 },
}


page.json
{
  "enablePullDownRefresh": true
}
在js文件中实现onPullDownRefresh方法,在网络请求完成后调用wx.stopPullDownRefresh()来结束下拉刷新




page.js
Page({
 onPullDownRefresh: function(){
     console.log('--------下拉刷新-------')
   wx.showNavigationBarLoading() //在标题栏中显示加载
     wx.request({
         url: '',
         data: {},
         method: 'GET',
         success: function (res) {},
         fail: function (res) {},
         complete: function (res) {
             // complete
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
         }
     })
 }
})



bug处理

在使用时遇到了一个bug,下拉时的三个圆点没有显示

原因

分析之后发现是因为圆点的颜色与背景色一样,影响了显示

处理方法

在json文件中配置backgroundTextStyle来设置下拉背景字体、loading 图的样式为dark

app.json
{
  "window": {
    "backgroundTextStyle": "dark"
  },
}
pags.json
{
  "backgroundTextStyle": "dark"
}





微信小程序 CSS 清除浮动 flexfix

很多同学都在使用下面的骨灰级解决办法:

.clear{
    clear:both;
    height:0;
    overflow:hidden;
}

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。

最优浮动闭合方案(这是我们推荐的):

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

用法很简单,在浮动元素的父云素上添加class=”demo clearfix”。

你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:

很拉轰的浮动闭合办法:

.clearfix {
  overflow: auto;
  _height: 1%;
}

这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的,测试通过:

.clearfix{overflow:hidden;_zoom:1;}

以上为转载  我用的是拉轰的浮动闭合  直接解决浮动不占位的问题。

踩一踩微信小程序开发的坑---tabBar

1. 书写,正确书写时tabBar,不要写成tabbar


2. 在配置中加入index目录,不在pages中添加index目录,也会导致tabBar不显示


3. tabBar属性的要求,官方教程微信小程序官方教程

画重点,tabBar中list的个数最少2个,最多5个。list中每个对象的属性值iconPath和selectedIconPath试了一下,可以不填写

4,这个就是随手一按解决的(shift+【   键),这个坑隐藏的很深,第一个目录中的.json中,不管配置不配置其它数据,必须要加一个{}



微信应用号将推出,梳理下手机app开发案例

最近微信应用号即将推出的消息又在业内传得沸沸扬扬,webapp也越来越受到大家的关注。很多人一听说微信应用号,多少会有点一头雾水。但实际上,微信早已经存在应用号了。在目前微信钱包中的第三方服务中,就能看到一些微信应用号的雏形。至于此次提出的应用号,则是可能把入口从微信钱包转移到公众号中来。

事实上,微信应用号也就是现在的微信钱包里面的应用即webapp,也就是通过H5技术开发出来的

说到传统的手机App,也许很多人都非常了解。但说到WebApp,大家都不明所以。WebApp是什么?和传统的手机App有什么不同?WebApp适用于哪些手机应用场景?

- 阅读剩余部分 -