当前位置:首页 > JavaScript > 正文

微信小程序的轮播图是如何实现的(微信小程序怎么实现轮播图)

微信小程序的轮播图是如何实现的(微信小程序怎么实现轮播图)

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

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

先上图,再解释

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

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

发表评论

右侧图文

推荐文章

  • sem开户(sem推广开户渠道)sem开户(sem推广开户渠道)
  • 炫酷花里胡哨倒计时引导页HTML源码炫酷花里胡哨倒计时引导页HTML源码
  • SEO网站推广怎么做(SEO网站推广的6个方法与技巧)SEO网站推广怎么做(SEO网站推广的6个方法与技巧)
  • 最新文章