微信小程序实现带放大效果的轮播图

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

效果如图

WXML

<!-- 轮播图 -->
 <view class='Carousel'>
 <view class="recommend">
  <view class="swiper-container">
  <swiper class="swiper" autoplay="auto" interval="2000" duration="500" bindchange="swiperChange" previous-margin="40px" next-margin="40px" circular="true">
   <block wx:for="{{slider}}" wx:key="unique">
   <swiper-item data-url="{{item.linkUrl}}">
    <image class='{{swiperCurrent==item.imgId?"img_current":"img"}}' src="{{item.picUrl}}" mode="widthFix"></image>
   </swiper-item>
   </block>
  </swiper>
  <!-- 指示点 -->
  <!-- <view class="dots">
   <block wx:for="{{slider}}" wx:key="unique">
   <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
   </block>
  </view> -->
  </view>
 </view>
</view>

WXSS

.Carousel{
 margin-top: 49px;
 background-color: #fff;
}
.swiper-container{
 position: relative;
}
.swiper-container .swiper{
 padding-top: 8px;
 height: 380rpx;
 text-align: center;
}
swiper-item{
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.swiper-container .swiper .img{
 width: 88%;
 height: 88%;
 border-radius: 10px;
}
.img_current{
 width: 100%;
 height: 100%;
 border-radius: 10px;
}
.swiper-container .dots{
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 width: 28rpx;
 height: 28rpx;
 margin: 0 10rpx;
 border-radius: 50%;
 background: #fff;
 transition: all .6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}
.swiper-container .dots .dot.active{
 background: #f80;
 color:#fff;
}

JS

data: {
 //轮播图
 slider: [
  { imgId: '0', linkUrl: 1, picUrl: '/images/swiper/swiper_1.png' },
  { imgId: '1', linkUrl: 2, picUrl: '/images/swiper/swiper_2.png' },
  { imgId: '2', linkUrl: 3, picUrl: '/images/swiper/swiper_3.png' },
  ],
 swiperCurrent: 0,
 }

  /**
 * 轮播图
 */
 swiperChange: function (e) {
 //把切换后当前的index传给<swiper>组件的current属性
 this.setData({
  swiperCurrent: e.detail.current
 })
 },

 //点击指示点切换
 // chuangEvent: function (e) {
 // this.setData({
 //  swiperCurrent: e.currentTarget.id
 // })
 // },

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

(0)

相关推荐

  • 超简单的微信小程序轮播图

    Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工具里面导入该项目,就可以调试项目,查看效果. 效果图: 微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,script对应小程序的js文件,config对应小程序的json文件) <style type="le

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

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

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

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

  • 微信小程序视图容器(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面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等. 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码如下: <view class="swiper-container"> <swiper autoplay="auto" interval=

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

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

  • 微信小程序swiper实现滑动放大缩小效果

    效果图如下所示: 具体代码如下所示: <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange"> <block wx:for="{{imgUrls}}" wx:index="{{index}}&qu

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

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

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

    本文实例为大家分享了微信小程序轮播图的具体代码,供大家参考,具体内容如下 1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_s

  • 微信小程序顶部导航栏可滑动并选中放大

    这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 老规矩,先看效果图 可以看到我们实现了如下功能 1,顶部导航栏 2,可以左右滑动的导航栏 3,选中条目放大 原理其实很简单,我这里把我研究后的源码发给大家吧. wxml文件如下 <!-- 导航栏 --> <scroll-view scroll-x class="navbar" scroll-with-animatio

随机推荐