微信小程序实现下拉刷新和轮播图效果
本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下 先上图,再解释 wxml页面代码: 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+"页数=========================="); }); }) 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----" ); /**
/**
console.log( "----end----_post-----" ); module.exports = { 由于我请求的api是来自己与极速数据的,所以是私人的appkey。不方便透露,大家可以去注册一下,里面可以免费申请使用的。换成自己的appkey就可以啦。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |