這篇文章將為大家詳細(xì)講解有關(guān)微信小程序如何實(shí)現(xiàn)下拉刷新和輪播圖效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、鶴慶網(wǎng)站維護(hù)、網(wǎng)站推廣。

先上圖，再解釋

wxml頁(yè)面代碼:

<scroll-view scroll-y="true" bindscrolltolower="lower"  class="scroll">
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-box">
  <block wx:for="{{imgUrls}}">
   <swiper-item>
     <image src="{{item}}" class="slide-img" ></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">用餐人數(shù)<text>{{item.cookingtime}}</text></view>
    <view class="use-text overflow">菜譜說(shuō)明：<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">沒(méi)有更多內(nèi)容了</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');
//獲取應(yīng)用實(shí)例
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:[]
 },
 //事件處理函數(shù)
 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("成功請(qǐng)求=============================");
  },function(){

  });
  //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
  app.getUserInfo(function(userInfo){
   //更新數(shù)據(jù)
   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+"頁(yè)數(shù)==========================");
   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("成功請(qǐng)求2=============================");
   },function(){

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

})

network_util.js 代碼如下:(主要是對(duì)wx.request的請(qǐng)求做了類(lèi)似于封裝調(diào)用方便用的。)

/**
 * url 請(qǐng)求地址
 * success 成功的回調(diào)
 * fail 失敗的回調(diào)
 */
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 請(qǐng)求地址
 * success 成功的回調(diào)
 * fail 失敗的回調(diào)
 */
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 請(qǐng)求地址
 * success 成功的回調(diào)
 * fail 失敗的回調(diào)
 */
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
}

由于我請(qǐng)求的api是來(lái)自己與極速數(shù)據(jù)的，所以是私人的appkey。不方便透露，大家可以去注冊(cè)一下，里面可以免費(fèi)申請(qǐng)使用的。換成自己的appkey就可以啦。

關(guān)于“微信小程序如何實(shí)現(xiàn)下拉刷新和輪播圖效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站名稱(chēng)：微信小程序如何實(shí)現(xiàn)下拉刷新和輪播圖效果
轉(zhuǎn)載注明：http://www.chinadenli.net/article14/gpdege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、微信小程序、網(wǎng)站收錄、定制開(kāi)發(fā)、軟件開(kāi)發(fā)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)