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


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
js获取电脑分辨率的思路及操作
Nov 22 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
对javascript继承的理解
Oct 11 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 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实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
巧用canvas
2017/01/21 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python中print函数简单使用总结
2019/08/05 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
写给爸爸的道歉信
2014/01/15 职场文书
模具数控专业自荐信
2014/01/27 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
条幅标语大全
2014/06/20 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
学生会副主席竞选稿
2015/11/19 职场文书