微信小程序实现下拉刷新和轮播图效果

<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>

.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;}

//fresh.jsvar 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("---------------------------") }，})

/** * 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}