加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 20:11:27 所属栏目:资源 来源:网络整理
导读:本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下 先上图,再解释 wxml页面代码: {{item.cookingtime}} {{item.content}} wxss样式: .scroll{ wwidth: 100%; } .scroll .slide-img{ width: 100%; display: bloc

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

先上图,再解释

wxml页面代码:

{{item.cookingtime}} {{item.content}}

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就可以啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读