国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

微信小程序?qū)崿F(xiàn)下拉刷新和輪播圖效果

2019-11-19 14:53:20
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)下拉刷新和輪播圖展示的具體代碼,供大家參考,具體內(nèi)容如下

先上圖,再解釋

wxml頁(yè)面代碼:

<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">用餐人數(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.jsvar 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就可以啦。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 凉山| 油尖旺区| 大宁县| 诸暨市| 江油市| 漳浦县| 上蔡县| 交城县| 辽阳县| 乳源| 大田县| 禹城市| 贵溪市| 荣成市| 岳阳市| 舞钢市| 西城区| 揭西县| 宜城市| 霍林郭勒市| 育儿| 城步| 五家渠市| 汝南县| 天全县| 汉寿县| 深泽县| 平原县| 孟津县| 天全县| 金塔县| 榆林市| 米易县| 吐鲁番市| 巴楚县| 平江县| 施秉县| 巴林右旗| 安陆市| 西贡区| 垦利县|