本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下
先上图,再解释
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的请求做了类似于封装调用方便用的。)
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,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就可以啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。