小程序的下拉刷新和轮播图

先上图，再解释

wxml页面代码:

<scroll-view  scroll-y="true" bindscrolltolower="lower" style="height:{{screenH}}px" class="scroll">
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-box">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
         <image src="{{item}}" class="slide-img" style="height:100%"></image>
      </swiper-item>
    </block>
</swiper>
<view class="text-food">美食篇</view>
<view class="list-box clear" wx:for="{{list}}">
    <image src="{{item.pic}}" class="img-food fl"></image>
    <view class="fl detail-view">
       <text class="text-name">{{item.name}}</text>
       <view class="use-text">用餐人数<text>{{item.cookingtime}}</text></view>
       <view class="use-text overflow">菜谱说明：<text>{{item.content}}</text></view>
    </view>
</view>
<view class="loading-view">
  <image src="../../img/loading.gif" class="loading-img" wx:if="{{hasMore}}"></image>
  <text wx:else class="no-data">没有更多内容了</text>
</view>
</scroll-view>

wxss样式:

.fl {
    float: left;
}
.fr {
    float: right;
}
.clear:after {
    content: '';
    display: block;
    clear: both;
}
view,scroll-view,swiper{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scroll{
    wwidth: 100%;
}
.scroll .slide-img{
    width: 100%;
    display: block;
}
.scroll .text-food{
    color: #666;
    font-size: 30rpx;
    margin: 15rpx 0rpx 20rpx 1%;
    height: 30rpx;
    border-left: 2px solid rgb(0, 187, 161);
    padding-left: 10rpx;
    line-height: 30rpx;
}
.scroll .list-box{
    padding: 0px 0px 20rpx 1%;
    margin: 20rpx 0px;
    border-bottom: 1px solid #d1d1d1;
}
.list-box .img-food{
    width: 180rpx;
    height: 180rpx;
}
.list-box .detail-view{
    width: calc(100% - 180rpx);
    padding-left: 4%;
    height: 180rpx;
    padding-top: 20rpx;
}
.detail-view .text-name{
   color:  rgb(0, 187, 161);
   font-size: 32rpx;
}
.detail-view .use-text{
    color: #666;
    font-size: 28rpx;
    margin: 15rpx 0px;
}
.loading-view{
    text-align: center;
    margin-bottom: 40rpx;
}
.loading-view .loading-img{
    width: 32px;
    height: 32px;
}
.loading-view .no-data{
    color: #666;
    font-size: 28rpx;
}

js代码:

//fresh.js
var network_util = require('../../utils/network_util.js');
//获取应用实例
var app = getApp()
Page({
  data: {
    screenH:0,
    autoplay:true,
    duration:500,
    interval:3000,
    hasMore:true,
    imgUrls:[
      '../../img/test1.jpg',
      '../../img/test2.jpg',
      '../../img/test3.jpg',
    ],
    pageNum:10,
    list:[]
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad');
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
          that.setData({
            screenH:res.windowHeight * 1.5
          });
          console.log(that.data.screenH+"====-------------");
      }
    });
   var url = 'https://api.jisuapi.com/recipe/search?keyword=鸡肉&num=this.data.pageNum&appkey=(ps:你的appkey)';
   network_util._get(url,function(res){
         that.setData({
           list:res.data.result.list
         });
         console.log("成功请求=============================");
   },function(){

   });
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  },
  lower:function(){
    console.log("滑到底部了===================");
     var pageNum = this.data.pageNum + 5;
     var that = this;
      if(!that.data.hasMore || pageNum == 40){
         that.setData({
           hasMore:false
        });
        return;

      }

     console.log(pageNum+"页数==========================");
     var url = 'https://api.jisuapi.com/recipe/search?keyword=白菜&num='+(pageNum)+'&appkey=(ps:你的appkey)';
     network_util._get(url,function(res){
         that.setData({
           list:that.data.list.concat(res.data.result.list),
           pageNum:pageNum
         });
         console.log("成功请求2=============================");
      },function(){

      });
     console.log("---------------------------")
  }，

})

network_util.js 代码如下:(主要是对wx.request的请求做了类似于封装调用方便用的。)

/**
 * url 请求地址
 * success 成功的回调
 * fail 失败的回调
 */
function _get( url, success, fail ) {

    console.log( "------start---_get----" );
    wx.request( {
        url: url,
        header: {
            'Content-Type': 'application/json'
        },
        success: function( res ) {
            success( res );
            console.log("成功引用了==================");
        },
        fail: function( res ) {
            fail( res );
        }
    });

    console.log( "----end-----_get----" );
}

/**
 * url 请求地址
 * success 成功的回调
 * fail 失败的回调
 */
function _post(url,data, success, fail ) {
     console.log( "----_post--start-------" );
    wx.request( {
        url: url,
        header: {
            'Content-Type': 'content-type x-www-form-urlencoded',
            'Accept': 'application/json',
        },
        method:'POST',
        data:'data='+data,
        success: function( res ) {
            success( res );
        },
        fail: function( res ) {
            fail( res );
        }
    });
     console.log( "----end-----_get----" );
}

    /**
 * url 请求地址
 * success 成功的回调
 * fail 失败的回调
 */
function _post_json(url,data, success, fail ) {
     console.log( "----_post--start-------" );
    wx.request( {
        url: url,
        // header: {
        //     'Content-Type': 'application/json',
        //     'Accept': 'application/json',
        // },
        method:'POST',
        data:data,
        success: function( res ) {
            success( res );
        },
        fail: function( res ) {
            fail( res );
        }
    });

    console.log( "----end----_post-----" );
}

module.exports = {
    _get: _get,
    _post:_post,
    _post_json:_post_json
}

由于我请求的api是来自己与极速数据的，所以是私人的appkey。不方便透露，大家可以去注册一下，里面可以免费申请使用的。换成自己的appkey就可以啦.