微信小程序实现带缩略图轮播效果

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

wxml:

<view id="content">
 <!--banner-->
 <view class="recommend">
  <view class="swiper-container">
   <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" circular="{{circular}}" bindchange="swiperChange" class="swiper">
    <block wx:for="{{slider}}" wx:key="unique">
     <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}" class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvents" id="{{index}}">
      <image src="{{item.picUrl}}" class="img"></image>
      <span>{{item.index+1}}</span>
     </swiper-item>
    </block>
   </swiper>
   <view class="dots">
    <swiper autoplay="auto" interval="5000" display-multiple-items="7" duration="500" current="{{dotsCurrent}}" circular="{{circular}}" bindchange="dotsChange">
     <block wx:for="{{slider}}" wx:key="unique">
      <swiper-item data-id="{{item.id}}" class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">
       <image src="{{item.picUrl}}" class="imgs"></image>
      </swiper-item>
     </block>
    </swiper>
   </view>

  </view>
 </view>
</view>

wxss:

/* pages/shouye/shouye.wxss */

page {
 background: #333;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

#content {
 background: #333;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

a {
 width: 100%;
 height: 50px;
 overflow: hidden;
}

/*banner轮播 */

.swiper-container {
 margin-top: 23%;
 position: relative;
}

.swiper-container .swiper {
 height: 600rpx;
}

.swiper-container .swiper .img {
 width: 100%;
 height: 100%;
}

.swiper-container .dots {
 position: fixed;
 height: 80px;
 right: 0rpx;
 width: 100%;
 bottom: 0rpx;
}

.swiper-container .dots .dot {
 /* margin: auto 3px; */
 /* width: 58px !important; */
 height: 65px !important;
 /* background: #333; */
 /* transition: all 0.6s; */
}

.swiper-container .dots .dot.active .imgs {
 width: 100% !important;
 height: 100%;
 margin: 0% auto;
}

.imgs {
 width: 85%;
 display: block;
 margin: 5% auto;
 height: 90%;
}

.swiper-container .dotes {
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}

.swiper-container .dotes .dote {
 margin: 0 10rpx;
 width: 28rpx;
 height: 28rpx;
 background: #fff;
 border-radius: 50%;
 transition: all 0.6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}

.swiper-container .dotes .dote.actives {
 background: #f80;
 color: #fff;
}

js

 //banner
Page({
 data: {
  //轮播图
  slider: [],
  swiperCurrent: 3,
  slider: [{
   url: '', picUrl: 'images/1.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  },
  {
   picUrl: 'images/4.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  },
  {
   picUrl: 'images/5.jpg'
  },
  {
   picUrl: 'images/3.jpg'
  }
  ],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 1000,
  circular: true,
  beforeColor: "white",//指示点颜色
  afterColor: "coral",//当前选中的指示点颜色
 },
 //轮播图的切换事件
 swiperChange: function (e) {
  //只要把切换后当前的index传给<swiper>组件的current属性即可
  this.setData({
   swiperCurrent: e.detail.current
  })
 },
 dotsChange: function (e) {
  //只要把切换后当前的index传给<swiper>组件的current属性即可
  this.setData({
   dotsCurrent: e.detail.current
  })
 },
 //点击指示点切换
 chuangEvent: function (e) {
  this.setData({
   swiperCurrent: e.currentTarget.id
  })
 },
 chuangEvents: function (e) {
  this.setData({
   dotsCurrent: e.currentTarget.id
  })
 },

})

效果图:

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

(0)

相关推荐

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

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

  • 微信小程序联网请求的轮播图

    微信小程序的轮播图和Android的轮播图一点不一样 ,这里我们看一下我们需要用到的控件介绍 这里我们用到了swiper这个组件,上边的图片已经把这个组件的属性 都列出来了 我们用的时候直接用就可以了 接下来,再看一下网络请求的API,这里我们用到的是GET 请求,我们开一下微信小程序官方给我们的API 接下来就是开启我们小程序轮播图之旅了,附上一张效果图 首先,我们看一下我们的index.wxml文件 <view> <swiper class="swiper_box"

  • 微信小程序视图容器(swiper)组件创建轮播图

    本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档 二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l

  • 微信小程序使用swiper组件实现类3D轮播图

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现 效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重新设置小圆点 circular 是否衔接滑动,就是实现无限

  • 微信小程序图片轮播组件gallery slider使用方法详解

    本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下 先上效果图: wxml <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class=&quo

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

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

  • 微信小程序实现图片轮播及文件上传

     微信小程序实现图片轮播及文件上传 刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传. 图片轮播: index.js <span style="font-size:14px;">var app = getApp() Page({ data:{ mode: 'aspectFit', // src:'../images/timg1.jpg', imgUrls:[ '../images/1.jpg', '../images/2.jpg', '../imag

  • 微信小程序 swiper组件构建轮播图的实例

    微信小程序 swiper组件构建轮播图的实例 实现效果图: wxml基础文件: <view class="classname"> <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red"> <swiper-item><image src=&qu

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

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

  • 微信小程序之swiper轮播图中的图片自适应高度的方法

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}

  • 微信小程序实现轮播图效果

    微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper'>滑块视图容器</view> <!-- indicator-dots='true' 是否显示指示点 默认 false indicator-color:指示点颜色 indicator-active-color:选中的指示点颜色 autoplay:是否自动切换 默认:false interval:自动切

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

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

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

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

随机推荐

其他