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


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 相关文章推荐
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
JavaScript中DOM详解
Apr 13 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python 实现数组相减示例
2019/12/27 Python
python如何把字符串类型list转换成list
2020/02/18 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
童装店创业计划书
2014/01/09 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
农村党员对照检查材料
2014/09/24 职场文书
党员违纪检讨书
2015/05/05 职场文书
2015年教师国培感言
2015/08/01 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers