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


Posted in Javascript onNovember 21, 2017

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

先上图,再解释

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

wxml页面代码:

<scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{screenH}}px" class="scroll">
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-box">
  <block wx:for="{{imgUrls}}">
   <swiper-item>
     <image src="{{item}}" class="slide-img" style="height:100%"></image>
   </swiper-item>
  </block>
</swiper>
<view class="text-food">美食篇</view>
<view class="list-box clear" wx:for="{{list}}">
  <image src="{{item.pic}}" class="img-food fl"></image>
  <view class="fl detail-view">
    <text class="text-name">{{item.name}}</text>
    <view class="use-text">用餐人数<text>{{item.cookingtime}}</text></view>
    <view class="use-text overflow">菜谱说明:<text>{{item.content}}</text></view>
  </view>
</view>
<view class="loading-view">
 <image src="../../img/loading.gif" class="loading-img" wx:if="{{hasMore}}"></image>
 <text wx:else class="no-data">没有更多内容了</text>
</view>
</scroll-view>

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;
}
.loading-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就可以啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 #Javascript
微信小程序实现tab切换效果
Nov 21 #Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 #Javascript
值得收藏的vuejs安装教程
Nov 21 #Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 #jQuery
You might like
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
django序列化serializers过程解析
2019/12/14 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
小学六一儿童节活动方案
2014/08/27 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
公司新员工欢迎词
2015/09/30 职场文书
初三数学教学反思
2016/02/17 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers