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

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

先上图,再解释

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

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

(0)

相关推荐

  • 微信小程序实战之轮播图(3)

    轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右滑动,点击指示点可以切换图片 重点说明: 由于微信小程序,整个项目编译后的大小不能超过1M 查看做轮播图功能的一张图片大小都已经有100+k了 那么我们可以把图片放在服务器上,发送请求来获取. index.wxml: 这里使用小程序提供的<swiper>组件 autoplay:自动播放 inter

  • 微信小程序 轮播图swiper详解及实例(源码下载)

    微信小程序 swiper 轮播图 前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • 微信小程序下拉刷新界面的实现

    微信小程序下拉刷新界面的实现 利用onPullDownRefresh函数设置下拉刷新功能 一.在app.json中,将window选项中的enablePullDownRefresh设为true "window":{ "enablePullDownRefresh":true } 或者在要刷新的界面的XXX.json中设置enablePullDownRefresh设为true { "enablePullDownRefresh": true } 二.利

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 微信小程序(六):列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

  • 微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)

    微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一) 页面缓存的设置优化了页面加载,减少了频繁的调取接口,使用户在断网的情况下有更好的体验. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localSt

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

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

    本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下 先上图,再解释 wxml页面代码: <scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{screenH}}px" class="scroll"> <swiper autoplay="{{autoplay}}"

  • 微信小程序实现下拉刷新和上拉分页效果的方法详解

    目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2

  • 微信小程序实现下拉刷新动画

    微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下 简易的效果 下面放代码: js: var animation = wx.createAnimation({}) var i = 1; Page({ data: { donghua: true, left1: Math.floor(Math.random() * 250 + 1), left2: Math.floor(Math.random() * 250 + 1), left3: Math.floor(Math.random()

  • Android下拉刷新与轮播图滑动冲突解决方案

    最近在开发中遇到了这样一个问题,在下拉刷新组件中包含了一个轮播图组件,当左右滑动的图片时很容易触发下拉刷新,如下图所示: 如图中红色箭头所示方向切换轮播图,很容易触发下拉刷新.网上查了很多方法,发现都不能很好的解决,于是自己研究了下. 我选用的第三方控件 1.下拉刷新我选用的是chanven的CommonPullToRefresh(系统自带的SwipeRefreshLayout也应该是一样的道理); 2.轮播图选用的是daimajia的AndroidImageSlider(用ViewPager也

  • 微信小程序使用swiper组件实现层叠轮播图

    本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下 wxml: <view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" i

  • 微信小程序select下拉框实现效果

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bi

  • 微信小程序 select 下拉框组件功能

    一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

  • 微信小程序select下拉框实现源码

    这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉,这里为了更清楚的显示小程序层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00<

  • 微信小程序实现下拉菜单切换效果

    本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序iOS下拉白屏晃动问题解决方案

    这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText: "购物车", disableScroll:true } </config> 这样的话页面整个都拉不动了,下面溢

随机推荐