精华内容
下载资源
问答
  • 小程序轮播图 先看效果图: 小程序swiper组件(官网上很详细)官网连接: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 详细介绍 难点 滑块后的背景固定,不能跟着滑块一起动 背景...

    小程序轮播图

    先看效果图:
    Alt
    小程序swiper组件(官网上很详细)官网连接:
    https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

    详细介绍

    难点

    • 滑块后的背景固定,不能跟着滑块一起动
    • 背景颜色改变

    源码奉上

    • wxml 源码
    <!-- banner START -->
        <view class='banner'>
          <view class="banner-swiper" >
          <!-- 后面的背景图   {{swiperColor}} 是动画 背景样式控制 border-radis控制   -->
            <view class='banner-radius {{swiperColor}}' style=' border-radius: 0 0 50% 50%;background-color:#78b4ff;'>
              <image style='width:100%;opacity:0.4;' src='../../image/banner-back.png'></image>
            </view>
             <!-- indicator-dots="false" 是否显示指示点  autoplay="false" 是否自动切换 circular=“false” 是否采用衔接滑动   -->
             <!-- interval=“1000” 自动切换的时间间隔 duration=“1500” 滑动的时长 bindchange='bannerChange' 滑块监控事件  -->
            <swiper 
              indicator-dots="{{indicatorDots}}" autoplay="true" circular="false" vertical="{{vertical}}"
              interval="3000" duration="1500"  bindchange='bannerChange' >
              <!-- banner数组 -->
              <block wx:for="{{banner}}" wx:key="*this">
                <swiper-item>
                  <view  class="swiper-item"  bindtap='detail' data-id='{{index}}' ><image class='banner-image' src='{{baseUrl}}{{item.smallImage}}'></image></view>
                </swiper-item>
              </block>
            </swiper>
            <!--重置小圆点的样式  -->
             <view class="dots">  
                <block wx:for="{{banner}}">  
                    <view class="dot{{index == bannerIndex ? ' active' : ''}}"></view>  
                </block>  
             </view>    
          </view>
        </view>
        <view style='width:100%;height:6px; background:#eaeaea;'></view>
        <!-- banner END -->
    
    • wxss 这里说一下背景样式改变:我的实现方式是固定4中颜色进行动画切换。实现方式也是通过js控制 上面的{{swiperColor}} 就是。具体方式看js
    .swiper-item{
     display: block;
     height: 150px;
    }
    .banner-image{
     width: 88%;
     height: 80%;
     margin-top:5%;
     margin-left: 6%;
     box-shadow: 0px 0px 4px 0px rgb(102, 101, 101);
     border-radius: 6px;
    }
    .banner-swiper{
     width: 100%;
     margin-bottom: 5px;
    }
    .banner-radius{
     width: 100%;
     height: 100px;
     position: absolute
    }
    .banner{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    }
    .swiper-color1{
     animation: background1 3s 1;
     animation-fill-mode:forwards;
    }
    /* 固定动画效果 */
    @keyframes background1{
     from { background-color: #78b4ff; }
     to { background-color: #3a3a3a; }	
    }
    .swiper-color2{
     animation: background2 3s 1;
     animation-fill-mode:forwards;
    }
    @keyframes background2{
     from { background-color: #3a3a3a; }
     to { background-color: #24d76f; }	
    }
    .swiper-color3{
     animation: background3 3s 1;
     animation-fill-mode:forwards;
    }
    @keyframes background3{
     from { background-color: #24d76f; }
     to { background-color: #ee8893; }	
    }
    .swiper-color0{
     animation: background0 3s 1;
     animation-fill-mode:forwards;
    }
    @keyframes background0{
     from { background-color: #ee8893; }
     to { background-color: #78b4ff; }	
    }
    .swiper-color-0{
     animation: background-0 3s 1;
     animation-fill-mode:forwards;
    }
    @keyframes background-0{
     from { background-color: #3a3a3a; }
     to { background-color: #78b4ff; }	
    }
    .swiper-color-1{
     animation: background-1 3s 1;
     animation-fill-mode:forwards;
    }
    @keyframes background-1{
     from { background-color: #24d76f; }
     to { background-color: #3a3a3a; }	
    }
    .swiper-color-2{
     animation: background-2 3s 1;
     animation-fill-mode:forwards;
    }
    @keyframes background-2{
     from { background-color: #ee8893; }
     to { background-color: #24d76f; }	
    }
    .swiper-color-3{
     animation: background-3 3s 1;
     animation-fill-mode:forwards;
    }
    @keyframes background-3{
     from { background-color: #78b4ff; }
     to { background-color: #ee8893; }	
    }
    /*用来包裹所有的小圆点  */
    .dots {
     width: 93rpx;
     height: 18rpx;
     display: flex;
     flex-direction: row;
     position: absolute;
     left: 44%;
     top:20%;
     background-color:rgba(0,0,0,0.1);
     border-radius: 9rpx;
     padding-left: 10rpx;
     align-items: center;
     justify-content: center; 
    }
    /*未选中时的小圆点样式 */
    .dot {
     width: 10rpx;
     height: 10rpx;
     border-radius: 50%;
     margin-right: 10rpx;
     background-color:#ccd2d0;
    }
    /*选中以后的小圆点样式  */
    .active {
     width: 10rpx;
     height: 10rpx;
     background-color: #f8f4f4;
    }
    
    • jss实现
    data: {
    	swiperColor: '',/* 样式动画 */
        bannerIndex:0, /* 滑块的下标 */
        banner:[],  /* 获取的图片 */
        indicatorDots: false, /* 是否显示指示点 */
        vertical: false /*是否为镜像*/
        }
        /* banner改变监听事件 */
      bannerChange(e){
        let current = e.detail.current;
        let that = this
        let back =''
        /* swiperColor 背景颜色的动态改变方式 */
        if (current > that.data.bannerIndex || (current == 0 && that.data.bannerIndex==(that.data.banner.length-1))){
          back= "swiper-color" + current
        }else{
          back = "swiper-color-" + current
        }
        that.setData({
          swiperColor: back,
          bannerIndex: current
        })
      },
    

    基本实现都写了,如果有不足或问题及时留言谢谢

    展开全文
  • 小程序轮播图

    2019-12-24 20:22:53
    小程序轮播图 通常大家在做小程序的时候会用到轮播图,这个功能,我这里就来说一下 效果图 这个图片我是保存到本地的图片 ,效果是可以无限循环的左右滑动,不存在滑动到最后一张图片后滑动不了,也是隔一段时间后会...

    小程序轮播图

    通常大家在做小程序的时候会用到轮播图,这个功能,我这里就来说一下

    效果图

    这个图片我是保存到本地的图片 ,效果是可以无限循环的左右滑动,不存在滑动到最后一张图片后滑动不了,也是隔一段时间后会自己去滚动图片
    在这里插入图片描述
    首先给这个轮播图规定一个盒子和样式
    wxml代码

    <view class="carousel"> </view>
    

    wxss代码
    这里我给width定义的是100%,没有给它的长固定写死,便于我们后面放图的时候方便,高度我们定义的是237rpx,盒子的高与顶部距离50rpx。这个大小可以根据自己的要求去写

    .carousel {
      width: 100%;
      height: 237rpx;
      padding-top: 50rpx;
    }
    

    盒子写好后,我们就要在里面放图片和定义它的样式
    我这里用的是这三类标签

    <swiper></swiper> <swiper-item></swiper-item> <block></block>
    

    这个在微信开发文档上面都可以搜到,也有介绍 我就不说了
    wxml代码

        <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" previous-margin="20rpx" next-margin="20rpx">
        <block wx:for="{{imgUrls}}" wx:key="">
          <swiper-item>
            <image style="display:block;width:99%;margin:0 auto;" src="{{item}}" mode="widthFix"></image>
          </swiper-item>
        </block>
      </swiper>
    

    wxss代码

     imgUrls: [
          '../../images/banner.png',
          '../../images/banner_1.png',
          '../../images/banner_2.png',
        ],
        indicatorDots: true, //导航点
        autoplay: true,
        circular: true, //衔接滑动
        interval: 5000,
        duration: 1000,
        TopIndex: 0, //切换
    

    在swiper中我用{{}}双括号的形式来引用在js中定义的效果:在这里我引用了4个,circular这是采用衔接滑动、interval是隔多长时间去切换、duration是滑动时的时间、autoplay是定义它是否自动播放。
    在block中我引用将图片地址链接保存的imgUrls中,在 image标签里面去给它定义相关的属性,图片的宽定义多宽,占据屏幕的百分比,每张图直接的间距是多大这些都可以在image标签里面去给它定义。

    注意事项

    1. 在image标签里面定义src=“{{item}}”这样来保证图片的循环
    2. 你是不是发现了,引入图片后,图片大小和盒子不匹配这个时候我们就要用到mode=“widthFix”这个属性,这个属性是保证图片长不变。高度变化,这个可以根据需求去定义开发文档里面都有,这样轮播图就大致完成了

    附上完整代码

    wxml

    <view class="carousel">
      <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" previous-margin="20rpx" next-margin="20rpx">
        <block wx:for="{{imgUrls}}" wx:key="">
          <swiper-item>
            <image style="display:block;width:99%;margin:0 auto;" src="{{item}}" mode="widthFix"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
    

    wxss

    .carousel {
      width: 100%;
      height: 237rpx;
      padding-top: 50rpx;
    }
    

    js

    page({
    	data:{
    		imgUrls: [
          '../../images/banner.png',
          '../../images/banner_1.png',
          '../../images/banner_2.png' 
          ],
        indicatorDots: true, //导航点
        autoplay: true,
        circular: true, //衔接滑动
        interval: 5000,
        duration: 1000,
        TopIndex: 0, //切换
    		},
    })
    

    代码就是这么多了,下一篇文章我们来说所谓的金刚区该如何排列

    展开全文
  • 微信小程序自适应轮播图

    千次阅读 2020-05-10 18:28:11
    微信小程序自适应轮播图

        微信小程序轮播图实现使用插件swiper,有很多属性可以点击进官方API看下。
        因为手机移动端屏幕的大小很多,轮播图的自适应就需要单独处理了。
        先看下效果(这个视频转gif改好多次才小于5M…):
    在这里插入图片描述

    代码:

    <!--
        circular:循环滑动
    	interval:循环时间
    	indicator-dots:显示页指示记号
    	easing-function:滑动效果
    -->
    <swiper autoplay interval='1000' circular="true" indicator-dots="true" easing-function="linear">
        <swiper-item>
        	<!-- mode:widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 -->
            <image mode="widthFix" src="//imgcps.jd.com/ling4/6533301/56m66LCD5paw5qy-6YCf6YCS/5Lq65rCU55av5oqi5Zeo57-75aSp/p-5c130ba282acdd181d949682/e91abaaa/cr_1125x445_0_171/s1125x690/q70.jpg" />  
        </swiper-item>
        <swiper-item>
            <image mode="widthFix" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/111193/3/3330/117360/5ea79d97E567a450d/de433bdae6c98b12.jpg!cr_1125x445_0_171!q70.jpg.dpg" />  
        </swiper-item>
        <swiper-item>
            <image mode="widthFix" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/95842/38/12546/80187/5e4ba3e7E09e0da3b/92aac67aefdf6b6f.jpg!cr_1125x445_0_171!q70.jpg.dpg" />  
        </swiper-item>
        <swiper-item>
            <image mode="widthFix" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/103667/27/14535/141643/5e679c31E55742ef4/68570c750a151608.jpg!cr_1125x445_0_171!q70.jpg.dpg" />  
        </swiper-item>
    </swiper>
    
    /*
    自适应大小换算:
    图片宽*图片高=小程序宽*小程序高
    微信小程序窗口固定宽度为750rpx
    calc是css的计算函数
    */
    
    swiper{
        width:100%;
        height:calc(750rpx*445/1125);
    }
    image{
        width:100%;
    }
    
    展开全文
  • 以微信小程序为例: wxml文件: <!-- 1.轮播图外层容器 swiper 2.每一个轮播项 swiper-item 3.swiper标签 存在默认样式 1.width 100% 2.height 150px image 存在默认宽度和高度 320* 240 3.swiper 高度...

    以微信小程序为例:

    wxml文件: 

    <!-- 
      1.轮播图外层容器 swiper
      2.每一个轮播项 swiper-item
      3.swiper标签 存在默认样式
        1.width 100%
        2.height 150px image 存在默认宽度和高度 320* 240
        3.swiper 高度无法实现由内容撑开
      4.先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
        原图的宽度和高度  750 x 300
        swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
        swiper高度 = swiper宽度 * 原图的高度/ 原图的宽度
        height : 100%*300/750
      5.autoplay 自动轮播
      6.interval 修改轮播时间
      7.circular 自动衔接轮播,这样就不会穿帮
      8.indicator-dots 显示 指示器 分页器 索引器
      9.indicator-color 指示器的未选择的颜色
      10.indicator-active-color 选中的指示器的颜色
     -->
     <swiper indicator-dots="true" indicator-active-color="#ff0094" indicator-color="#fff"  autoplay="true" interval="3000" circular="true">
       <swiper-item>
         <image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
       </swiper-item>
       <swiper-item>
         <image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/2.jpg"></image>
       </swiper-item>
       <swiper-item>
         <image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/3.jpg"></image>
       </swiper-item>
     </swiper>
    

    wxss文件: 

    /*给轮播图设定宽度为100%,高度通过计算得出*/
    swiper{
      width: 100%;
     /* 300你的图片的高度, 750你的图片的宽度 ,100vw为显示屏幕的宽度*/
      height: calc(100vw * 300 / 750);
    }
    
    /*给图片设定宽度为100%*/
    image{
      width: 100%;
    }

    未添加样式前:

    添加样式且计算高度后:

    展开全文
  • 小程序轮播图的时候有时候会出现图片被压缩的情况,这是因为图片是宽度高度比例展示的,但是包裹轮播图的swiper的宽度和高度我们是固定掉的,因此我们得想出个办法解决这个问题,解决办法如下: 1.通过在image里...
  • 微信小程序轮播图+自定义高度

    千次阅读 2020-01-03 11:33:38
    重新写一个轮播图,在上次的基础上,添加了衔接滑动的功能,并对上一次写的进行一次完善。如有问题请在评论区描述问题。 .wxml 页面 <view class="image_swiper"> <swiper indicator-dots="{{...
  • 轮播图的光标可以用定位来改变上下左右的位置 wxml: &lt;!--start banner --&gt; &lt;swiper class='home-swiper' autoplay='true' bindchange='changDot' interval='4000'&gt; &lt;!-- ...
  • 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示...
  • 小程序轮播图的时候有时候会出现图片被压缩的情况,这是因为图片是宽度高度比例展示的,但是包裹轮播图的swiper的宽度和高度我们是固定掉的,因此我们得想出个办法解决这个问题,解决办法如下: 1.通过在image里...
  • 小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏。辣么,怎样让图片自适应不同分辨率捏。 我的思路是:获取屏幕宽度,获取图片的...
  • 微信小程序 制作banner轮播图

    千次阅读 2018-09-22 22:16:27
    接下来博主会用图文为大家讲解微信小程序的banner轮播图,因为微信小程序将相关代码都已经封装好了,大家直接使用就好了。最后附上源码包! 以下是微信小程序项目源码:点击可以进入gitee直接下载源码包喔 ...
  • 那就是,轮播图中的图片显示不全,尽管已经给image设置成了widthFix、width:“100%”,图片也没有锁定高宽比。乔巴的头都被削没了!!! 而且随着机型的改变,图片的高度方面显示的越来越少。乔巴缓缓下线了?? ...
  • 微信小程序轮播图,导航栏

    千次阅读 2019-07-06 12:20:50
    一个小程序的基本目录结构如下: project ├── pages | ├── index | | ├── index.json index 页面配置 | ...
  • 微信小程序 自定义轮播图指示点位置 .wx-swiper-dots { position: relative; left: unset !important; right: 0; } .wx-swiper-dots.wx-swiper-dots-horizontal { margin-bottom: -5rpx; }
  • 移动端常用效果图片轮播及数据列表已被小程序封装成了组件,这里和大家分享一下如何使用。 Scroll-view 可滚动视图区域  Swiper 图片轮播容器  Navigator 页面链接的3种方式  scroll-view  属性说明如下:  (此...
  • 在微信小程序开发文档里,组件模块,视图容器分类下,有swiper和swiper-item组件,这就是用来实现轮播图的组件,并且官方还提供了示例代码和演示效果 swiper 官方示例代码 Page({ onShareAppMessage() { return { ...
  • 主要为大家详细介绍了微信小程序实现banner图轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1.图片宽高比不变,同时,图片充满容器宽 <image style="width:100%;" mode='aspectFit' src='/images/slide.jpg'></image> 2.我把 swiper 的 width 设定成了屏幕的95%宽度, 如果想宽度也自适应的话...
  • 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示...
  • 2018_3_7学习总结日志最近算是入门了微信小程序小程序端吧,因为大一学习过html+css,然后再补一些js知识就去捣鼓了,我觉得这是学习的比较快的方法吧,实践出真知哈哈。
  • 轮播图尺寸:713*300 第一种办法: wxml <swiper class="banner" indicator-dots='true' mode="widthFix" indicator-color='#333' indicator-active-color='#f30' autoplay='true'> <swiper-item> ...
  • 小程序--背景图片固定不上滑

    千次阅读 2018-09-26 14:57:36
    1、首先还是要用到小程序的swiper组件 2、要实现背景图片不随页面滚动 可以用background-attachment:fixed 这个css属性实现 3、然后把轮播的图片设置到background-image里 4、问题:轮播图底部的面板指示点还是会...
  • 这是小程序轮播图 默认情况下是要设置好轮播图的width和height为px的,但是,我们想满屏怎么办呢,css有解决方法, 今天我们主要来说js的解决方法 首先拿到这个图片的默认大小,就是原始宽度和高度 ...
  • 微信小程序swiper轮播图高度自适应

    千次阅读 2019-06-11 09:49:59
    // 轮播图宽高自适应 imgHeight: function (e) { var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 var imgh = e.detail.height; //图片高度 var imgw = e.detail.width; //...
  • 移动端常用效果图片轮播及数据列表已被小程序封装成了组件,这里和大家分享一下如何使用。 Scroll-view 可滚动视图区域Swiper 图片轮播容器Navigator 页面链接的3种方式scroll-view 属性说明如下: 使用竖向滚动时...
  • 小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏。辣么,怎样让图片自适应不同分辨率捏。 我的思路是:获取屏幕宽度,获取图片的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,405
精华内容 14,562
关键字:

固定小程序轮播图