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

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

本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码，供大家参考，具体内容如下

先上图，再解释

wxml页面代码:

美食篇

{{item.name}}

用餐人数{{item.cookingtime}}

菜谱说明：{{item.content}}

没有更多内容了

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;

}

.lhttp://oading-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就可以啦。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。