本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码，供大家参考，具体内容如下
先上图，再解释
wxss样式:
.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,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代码:
});
//调用应用实例的方法获取全局数据
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的请求做了类似于封装调用方便用的。)
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,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,// header: {
// 'Content-Type': 'application/json',// 'Accept': 'application/json',// },data:data,fail: function( res ) {
fail( res );
}
});
console.log( "----end----_post-----" );
}
module.exports = {
_get: _get,_post:_post,_post_json:_post_json
}
由于我请求的api是来自己与极速数据的，所以是私人的appkey。不方便透露，大家可以去注册一下，里面可以免费申请使用的。换成自己的appkey就可以啦。
