小程序轮播图_小程序轮播图尺寸大小 - CSDN
精华内容
参与话题
  • 小程序里面的轮播图可以用swiper组件和swiper-item组件配合来实现我们所需要的各种各样的轮播图效果,只需要给这两个组件添加对应效果的属性就可以实现轮播图效果,怎么样?是不是很简单!下面我们来看看这两个组件吧...

    小程序里面的轮播图可以用swiper组件和swiper-item组件配合来实现我们所需要的各种各样的轮播图效果,只需要给这两个组件添加对应效果的属性就可以实现轮播图效果,怎么样?是不是很简单!下面我们来看看这两个组件吧!

    swiper 是一个可以滑动的视图容器,需要配合swiper-item组件才能发挥作用,单独使用不可以哦!属性如下:

    indicator-dots  是否显示面板指示点 

    indicator-color   否 指示点颜色 

    indicator-active - color  当前选中的指示点颜色  

    autoplay  是否自动切换  

    current   当前所在滑块的 index 

    interval    自动切换时间间隔  

    duration    滑动动画时长  

    circular  是否采用衔接滑动  

    vertical  滑动方向是否为纵向 

    previous-margin   前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 

    next - margin   后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 

    display - multiple - items    同时显示的滑块数量 

    skip-hidden - item - layout 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息  

    easing - function   指定 swiper 切换缓动动画类型  

    bindchange    current 改变时会触发 change 事件,event.detail = { current, source } 

    bindtransition  swiper - item 的位置发生改变时会触发 transition 事件,event.detail = { dx: dx, dy: dy } 

    bindanimationfinish   动画结束时会触发 animationfinish 事件,event.detail 同上

    swiper-item 和swiper只能和swiper-item一起配合使用一样。   swiper-item只能放到swiper容器里面 属性如下:

    item-id   该 swiper - item 的标识符

    接下来让我们用上面所述写一个简单的轮播图吧!

    index.wxml

    index.wxss

    index.js

    首先wxml页面属性绑定成变量为了后面好维护,其次js页面协商注释便于以后维护或修改起来方便,不用再去查找这个是什么属性了,干嘛的啦!

    最后,微信小程序一个简单的轮播图就做好了,后面还有写好多呢,所以就不说太多了,往后看吧,希望对你能有帮助!

     

    展开全文
  • 小程序卡片式轮播图

    千次阅读 2019-05-09 11:44:45
    1、js文件代码如下: Page({ /** * 页面的初始数据 */ data: { imgUrls: [ 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 'https://images.unsplash.com/photo-1551214012-84f...

    1、js文件代码如下:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        imgUrls: [
          'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
          'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
          'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640',
          'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
          'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
          'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
        ],
        indicatorDots: true, //是否显示面板指示点
        autoplay: true, //是否自动播放
        interval: 3000, //停留时间间隔
        duration: 1000, //播放时长
        previousMargin: '50px', //前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值
        nextMargin: '50px', //后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值
        circular: true, //是否采用衔接滑动
        currentSwiperIndex: 0, //swiper当前索引
      },
    
      swiperBindchange(e) {
        this.setData({
          currentSwiperIndex: e.detail.current
        })
      },
    })

    2、wxml代码如下:

    <swiper
      indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}"
      interval="{{interval}}"
      duration="{{duration}}"
      previous-margin="{{previousMargin}}" 
      next-margin="{{nextMargin}}"
      circular="{{circular}}"
      bindchange="swiperBindchange"
    >
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image {{currentSwiperIndex == index ? 'zoom-in' : 'zoom-out'}}"/>
        </swiper-item>
      </block>
    </swiper>

    3、wxss文件代码如下:

    swiper{
      margin-top: 50rpx;
    }
    
    .slide-image {
      width: 100%;
      height: 100%;
    }
    
    .zoom-out {
      transform: scale(0.8);
      transition: all 0.7s ease-out 0s;
    }
    
    .zoom-in {
      transform: scale(1);
      transition: all 0.7s ease-in 0s;
    }

    效果图如下:

    展开全文
  • -- 轮播 --> <swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'> <block wx:for="{{bnrUrl}}" wx:for-index="index" wx:key="index...

    那个先上效果:
    在这里插入图片描述
    step1:页面index.wxml代码

    <!-- 轮播 -->
    <swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
    	<block wx:for="{{bnrUrl}}" wx:for-index="index" wx:key="index">
    		<swiper-item>
    			<image src='{{item.image}}' class='u-img-slide' ></image>
    		</swiper-item>
    	</block>
    </swiper>
    

    step2:配置信息也就是index.js

    Page({
      data: {
        bnrUrl: [],
      },
      onLoad: function () {
        // 轮播 
        wx.request({
      	url: 'https://locally.uieee.com/slides',
      	success (res) {
        // console.log(res.data)
          this.setData({
            icons:res.data
          })
       })
    })  
    

    step3:样式文件 index.wxss

    /* 轮播 */
    .u-wrp-bnr {
      width: 100%;
      height: 300rpx;
      display: block;
      position: relative;
      /* top: rpx; */
      background: #f0f0f0;
    }
    .u-img-slide {
      width: 100%;
      height: inherit; 
      /* 继承夫类的高 */
    }
    

    然后就是wx.require({})中传递一个对象,这个对象的属性分别对应不同的含义

    wx.request({
      url: 'test.php', //仅为示例,并非真实的接口地址
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
      }
    })
    

    下面解释一下:

    • url:请求地址,必填
    • data:请求的参数
    • method:HTTP 请求方法,默认为get
    • dataType:返回的数据格式,默认为json
    • success:接口调用成功的回调函数
    • fail:接口调用失败的回调函数
    • complete:接口调用结束的回调函数(调用成功、失败都会执行)
    展开全文
  • 微信小程序轮播图的实现

    万次阅读 2018-11-13 16:14:53
    在Android或者ios中几乎所有的app都有轮播图这个效果,在android中一般是使用viewpager来实现的,在微信小程序中一般是用 swiper这个标签来实现的,我们在微信小程序文档中可以查看所有的标签,如图: 这些组件看做...

    在Android或者ios中几乎所有的app都有轮播图这个效果,在android中一般是使用viewpager来实现的,在微信小程序中一般是用

    swiper这个标签来实现的,我们在微信小程序文档中可以查看所有的标签,如图:

    这些组件看做是Android的什么textview,button imageview等就行了.

    swiper在文档中是指:滑块视图容器

    它的属性如下:

    属性名 类型 默认值 说明 最低版本
    indicator-dots Boolean false 是否显示面板指示点  
    indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
    indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0
    autoplay Boolean false 是否自动切换  
    current Number 0 当前所在滑块的 index  
    current-item-id String "" 当前所在滑块的 item-id ,不能与 current 被同时指定 1.9.0
    interval Number 5000 自动切换时间间隔  
    duration Number 500 滑动动画时长  
    circular Boolean false 是否采用衔接滑动  
    vertical Boolean false 滑动方向是否为纵向  
    previous-margin String "0px" 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 1.9.0
    next-margin String "0px" 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 1.9.0
    display-multiple-items Number 1 同时显示的滑块数量 1.9.0
    skip-hidden-item-layout Boolean false 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 1.9.0
    bindchange EventHandle   current 改变时会触发 change 事件,event.detail = {current: current, source: source}  
    bindanimationfinish EventHandle   动画结束时会触发 animationfinish 事件,event.detail 同上 1.9.0

    我们刚开始接触,没事可以每个属性去玩下,只有玩熟了,以后你才可以玩它

    现在开始动手写代码,在page目录下新建一个posts文件目录 

    然后创建对象的红框4个文件

    在wxml下随便写一个标签,看看是否能预览

    <text>我是轮播图</text> 

    要预览这个效果,首先要配置它是第一个启动界面,那么这个怎么配置呢?在我们的全局app.json中配置

    {

    "pages":[

    "page/posts/posts",

    "page/welcome/welcome"

    ],

    "window":{

    "navigationBarBackgroundColor": "#eeeeee"

    }

    }

    在pages属性中 排在第一个位置微信小程序规定是启动页,配置好了就可以预览了,no,你打开调试器发现报错

    怎么解决,就是在posts.json 中写一个空的json  {} 就行了

     

    还是回到讲轮播图 swiper上, 那么每个轮播图的子界面是用什么表示呢? 答案是<swiper-item>

    下面是我定义的轮播图 三张同样的图片:

    效果图:

    你会发现宽度没占满屏幕,那么好 我就设置image标签的宽度

    <image src='/images/bg.png' style="width:100%"></image>

    发现宽度是可以的占满全屏了,那么如果图片的高度要和swiper标签的高度一致呢?  那么就要在swiper标签中设置高度和image的高度是一致的才可以,如果你在swiper-item设置而没在swiper设置是没用的,因为swiper-item的高度是用swiper标签中的高度和宽度,如果swiper没设置,在swiper-item设置是不起作用的,这也是为什么swiper的高度要和image设置的高度是一样的

    还有点很奇怪的事,就是swiper-item可以设置是图片  也可以设置是text文本  这就是牛逼的地方了

    通常我们在轮播图都有个点,这个怎么加呢?很简单 ,看文档就知道:

    indicator-dots Boolean false 是否显示面板指示点

    默认是不显示的,要显示就改为true,还有什么自动滑动等属性,自己去试试就知道了.

    当然一般数据都是来自服务端的,在这只是模拟下而已,后面会说到从服务端获取数据然后显示.

     

    展开全文
  • 小程序轮播图

    2020-01-14 11:45:48
    方法一: js代码 Page({ data: { //轮播图配置 autoplay: true, interval: 3000, duration: 1200 }, onLoad: function () { var that = this; var data = { "datas": [ { ...
  • 五分钟掌握微信小程序轮播图

    万次阅读 2018-01-18 09:42:18
    微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了。微信小程序提供swiper组件,官网api提供的swiper滑块视图容器。属性名类型默认值说明autoplayBooleanfalse是否自动切换currentNumber0当前所在页面的 ...
  • 微信小程序 轮播图 swiper图片组件

    万次阅读 2016-10-13 21:47:46
    照着开发文档尝试,总是能有所收获....今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml
  • 以下是它的一些属性值,转载自微信公众平台小程序组件 对swiper组件有了一个大概的认识后,大家看我写的代码吧。 wxml代码如下: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" ...
  • 轮播图是大部分应用的一个常用的功能,常用于广告投放、产品展示、活动展示等等。 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用。 废话少说,下面开始动手。   业务需求: 5个图片轮番播放,可以左右...
  • 微信小程序实现轮播图(超简单)

    万次阅读 2019-07-16 16:10:43
    Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv、span等)写前端代码,也可以用微信...微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,s...
  • 小程序轮播图demo

    2020-07-30 09:43:39
    包含了从本地读取图片和网络获取图片两种方式,自动轮播无缝连接
  • 例子 css代码 .swiper-item{ overflow-x: hidden; } 这样就可以啦!~
  • 微信小程序之swiper轮播图

    万次阅读 2017-11-05 20:48:02
    使用微信小程序内置组件swiper实现轮播图 autoplay=true interval=2000 duration=500 circular=true > <image src="{{i
  • 原理其实就是获取当前轮播的id ,并将其放大(active样式中可见),就是swiperIndex == index ? ‘active’ : ” .wxml &amp;amp;amp;lt;swiper class=&amp;amp;quot;swiper-block&amp;amp;quot; ...
  • 实现微信小程序轮换图切换,点击获取图片url,获取当前位置 1、index.js Page({   data: {  autoplay: true,  dotsBoll: false,  interval: 2000,  duration: 1000,  current:0,  image
  • 效果: indicator-active-color="#007aff"//当前选中的指示点颜色 js: const app = getApp() Page({ data: { //-----------模拟banner----------- imgUrls: [ '/image/1545118381903.jpg', '/imag.....
  • 微信小程序轮播图的宽高问题

    千次阅读 2018-09-19 23:37:18
    场景如下:图片未能占满整个宽度,但是已经给轮播图添加样式width=100%;    分析:仅仅给样式添加样式是不够的,还应该给轮播图的里面的照片添加样式。如下图,  ...
  • 照文档上的去做实现的swiper轮播图,其效果是 每次图片轮播到最后一张时 页面会快速的倒退滚动到第一张 然后再轮播 这样效果实在太差。解决方法:是加入circular属性即可实现无缝轮播。        ...
  • 轮播图片需要同一个尺寸大小(或者尺寸相近)!!! 注意!!!轮播图片需要同一个尺寸大小(或者尺寸相近)!!! 注意!!!轮播图片需要同一个尺寸大小(或者尺寸相近)!!! 一、GitHub 源码下载链接 ...
  • 这里使用小程序提供的&lt;swiper&gt;组件autoplay:自动播放interval:自动切换时间duration:滑动动画的时长current:当前所在的页面bindchange:current 改变时会触发 change 事件由于&lt;swiper&...
1 2 3 4 5 ... 20
收藏数 118,214
精华内容 47,285
关键字:

小程序轮播图