小程序3d轮播图_微信小程序轮播图3d - CSDN
  • 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现 效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重新设置小圆点 circular 是否衔接...

    在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现

    效果图如下:

    1.swiper的相关属性

    indicator-dots 是否显示小圆点,也可以自己重新设置小圆点 circular 是否衔接滑动,就是实现无限滚动 previous-margin 与上一张图片的间距 next-margin 与下一张图片的间距 autoplay 实现自动滚动

    这里主要利用了circular实现无限滚动,然后再加上前后间距,再设置图片的层级和透明度就可以实现了,将图片及容器的高度设置好就差不多可以实现了

    wxml文件

    
    <!--carousel/index.wxml-->
    <swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>
      <block wx:for="{{3}}" wx:key="{{index}}">
        <swiper-item class="item">
          <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="../../../image/3.jpg"></image>
        </swiper-item>
      </block>
    </swiper>
    
    复制代码

    wxss文件

    
    /* carousel/index.wxss */
    page{
      background: #f7f7f7f7;
    }
    .imageContainer{
      width: 100%;
      height: 500rpx;
      background: #000;
    }
    .item{
      height: 500rpx;
    }
    .itemImg{
      position: absolute;
      width: 100%;
      height: 380rpx;
      border-radius: 15rpx;
      z-index: 5;
      opacity: 0.7;
      top: 13%;
    }
    .active{
      opacity: 1;
      z-index: 10;
      height: 430rpx;
      top: 7%;
      transition:all .2s ease-in 0s;
    }
    
    复制代码

    JS文件

    // carousel/index.js
    Page({
    
      data: {
        currentIndex: 0
      },
    
      onLoad: function (options) {
      
      },
      /* 这里实现控制中间凸显图片的样式 */
      handleChange: function(e) {
        this.setData({
          currentIndex: e.detail.current
        })
      },
    })
    复制代码

    这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

    转载于:https://juejin.im/post/5bcc7eb0e51d457a361f8a0a

    展开全文
  • 微信小程序swipe的3d轮播图

    千次阅读 2018-11-13 11:21:10
    最近因为比较闲,所以就研究了一下微信自带的swipe轮播工具,写了一个3d轮播效果,代码和效果如下:  首先先贴出微信小程序官方文档:   1.wxml的代码 &lt;swiper class="imageContainer"...

      最近因为比较闲,所以就研究了一下微信自带的swipe轮播工具,写了一个3d的轮播效果,代码和效果图如下:

      首先先贴出微信小程序官方文档:

     

    1.wxml的代码

    <swiper class="imageContainer" bindchange="handleImgChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>

      <block wx:for="{{imgUrls}}" >

        <swiper-item class="item">

           <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="{{item.url}}"></image>

        </swiper-item>

      </block>

    </swiper>

    2.wxss的代码

    .imageContainer{

    width: 100%;

    height: 500rpx;

    background: #000;

    }

    .item{

    height: 500rpx;

    }

    .itemImg{

    position: absolute;

    width: 100%;

    height: 380rpx;

    border-radius: 15rpx;

    z-index: 5;

    opacity: 0.7;

    top: 13%;

    }

    .active{

    opacity: 1;

    z-index: 10;

    height: 430rpx;

    top: 7%;

    transition:all .2s ease-in 0s;

    }

    3.js代码

    data: {

    imgUrls: [{

    // link: '/pages/index/index',

    url: '../../imgs/img_title_1.jpg'

    }, {

    // link: '/pages/index/index',

    url: '../../imgs/img_title_2.jpg'

    }, {

    // link: '/pages/index/index',

    url: '../../imgs/img_title_3.jpg'

    }],

    indicatorDots: true,

    autoplay: true,

    interval: 5000,

    duration: 1000,
     

    currentIndex: 0

    },

     

     

    /* 这里实现当前页面的样式 */

    handleImgChange: function (e) {

    this.setData({

    currentIndex: e.detail.current

    })

    },

     

    最终实现的效果截图:

    展开全文
  • 微信小程序3D轮播图实现

    万次阅读 2019-09-23 17:58:25
    好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于复制粘贴,h5以前...

    好久没有写博客了,前段时间换了家公司,做了两个多星期,完成了一款app的开发, 公司没有app的需求了,我们几个移动端Android和IOS都转岗开发微信小程序,由于刚接触小程序不到两周,技术还是基于复制粘贴,h5以前也就看看,所以针对css样式和div之类的没有什么感觉,基本一切从0开始,好了,扯淡完毕-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    刚看了2天的小程序,咱们几个就开始上手开撸,不得不说微信的小程序封装的还是挺全面的,其实也就是间接的说很多东西都封装的比较死板,UI希望首页的banner实现各种形式的3D轮播图的效果,请看效果图

    其实在app里面这种效果还是比较常见的,开源库也比较多,但是作为资深伸手党的我,居然没有搜索到实现3D轮播图的实例,好吧,只能自己开撸了,我的方式是基于原生的Swiper来实现的,配合previous-margin next-margin来实现左右两边的边框缩进效果,好了这只是第一步,第二部就是实现缩放的动画了效果了,我自己总结了两种方法,

    第一种:通过css中控制选中和没有选中的swiper做监听,修改对应的css的样式,这时候需要对swpier做onChange监听,来改变选中的index角标,这个变量要写在data层里面,让直行img的时候能动态获取到xIndex的值,执行不同的css样式,这种方式通过设置img的高度来实现,选中设置100%的高度,没有选中的设置高度为90%,代码如下

     <view class='bannerWrap'>
        <image class='imgBannerBack' src='../../static/img/back_banner.png' mode='scaleToFill'></image>
        <swiper class='bannerSwiper' previous-margin="54rpx" next-margin='54rpx' indicator-dots="true" indicator-color='#B5B5B5' indicator-active-color='#fff' interval='3000' duration='500' bindchange='onChange' circular='true'>
          <block wx:for="{{banner}}">
            <swiper-item>
              <image class="{{index==xindex?'imageBanner':'imageBanner_small'}}" src="{{item}}" id='{{item.url}}' bindtap='imageClick'></image>
            </swiper-item>
          </block>
        </swiper>
      </view>
    
    
    
    .imageBanner {
      width: 100%;
      height: 100%;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
    }
    
    
    .imageBanner_small {
      width: 94%;
      height: 90%;
      margin-left: 20rpx;
      margin-right: 20rpx;
      position: absolute;
      bottom: 0;
      border-top-left-radius: 15rpx;
      border-top-right-radius: 15rpx; 
    
    }
    
    
    
    
    
    
    
    
    
    
    

    第二种方法:

    原理基本相同,只不过改变图片大小的时候利用的css的trasnform和trasnsition来实现界面动画的放大和缩小的过程的一个切换,具体代码就是css的样式做了一个切换

    具体代码如下

    .imageBanner {
      width: 100%;
      height: 100%;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
    }
    
    .imageBanner_small {
      height: 100%;
      transform: scale(0.9);
      transition: all 0.2s ease-in 0s;
      border-top-left-radius: 15rpx;
      border-top-right-radius: 15rpx;
      bottom: -13rpx;
      margin-left: -10rpx;
      position: absolute;
     
    }

    下面看下具体实现的效果图吧

    今天比较忙,等稍微闲点的时候将对应的demo会上传供各位大佬参考,刚刚做小程序,实现的效果可能比较low,但是能解决目前遇到的问题,如果哪位大佬有更加好的实现方式,希望不吝赐教!

    终于在一位兄弟的督促下把demo上传了,贴上地址

    https://github.com/WinWang/WeChatBanner/tree/master

    展开全文
  • 微信小程序3D轮播图

    2020-07-30 23:31:49
    微信小程序3D轮播图,实现效果是正在现实的居中放大,未显示 的在两侧显示一部分并且比较小。
  • 微信小程序 3d 轮播图

    2020-06-11 11:46:15
    微信小程序 3d 轮播图 GitHub:https://github.com/17562105692/Carousel/tree/master

    微信小程序 3d 轮播图

    在这里插入图片描述
    GitHub:https://github.com/17562105692/Carousel/tree/master

    展开全文
  • 小程序3D轮播,旋转木马轮播组件
  • 微信小程序3D炫彩轮播图

    千次阅读 2018-09-14 11:04:58
    先看下一下效果: 不多BB,直接上代码: js部分: function getRandomColor() { const rgb = [] for (let i = 0; i &lt; 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) ...
  • 微信小程序层叠轮播图、3D轮播图

    万次阅读 2018-05-23 17:33:27
    接到个新需求,在微信小程序做层叠轮播,看了小程序的官方API没有swiper那么好用的方法,然后就想到之前拿原生js代码写的层叠轮播,其实一个道理。在swiper中显示多于1个的swiper-item,然后每个swiper-item中间有...
  •  在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件。 index.html &lt;view class='...
  • ![图片说明](https://img-ask.csdn.net/upload/201901/08/1546929537_286403.gif) 这是一款叫唔哩星球的APP 中首页的轮播效果, 在小程序中如何实现就大佬们指点啊!
  • 微信小程序—常用的四种轮播图(间距、顶层、3D翻转、旋转木马) 原创 ...
  • 3d轮播的简单实现,具体参数可以看微信swiper官方文档 这是wxml页面 view class=“sdswiper”> css页面 .sdswiper{ width: 100%; margin-top: 40rpx; } .imageContainer{ width: 100%; height: 345rpx; ...
  • 页面 <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:for='{{imgList}}' wx:key=''> <image class='le-im...
  • 微信小程序常用轮播图,常见四种轮播图,效果和PC的一样,常见的四种,可以自己修改……………………………………………………………………………………………………………………
  • 以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁。这次发现swiper也能实现同样的效果。故记录一下。 先看看效果: wxml: <swiper previous-margin='50px' next-margin='50px' ...
  • 废话不多说,直接上代码 .wxml <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};' autoplay="true" circular="true"> <swiper-item wx:for='{{...
1 2 3 4 5 ... 20
收藏数 14,959
精华内容 5,983
关键字:

小程序3d轮播图