小程序轮播图中间大两边小

不说这么多,直接上代码

        <swiper  class="swiper-block"  previous-margin="90rpx" next-margin="90rpx"  autoplay="{{yearOutoplay}}" current="0" circular=‘true‘ bindchange="yearSwiperChange" >
          <block wx:for="{{yearimgUrls}}" wx:index="{{index}}" wx:key=‘‘>
            <swiper-item class="swiper-item">
              <image mode="aspectFill" src="{{item.url}}" class="slide-image {{swiperCurrent == index ? ‘active‘ : ‘‘}}"/>
            </swiper-item>
          </block>
        </swiper>

  

swiperCurrent: 0,
    yearOutoplay:false,
    yearimgUrls: [
      {
        url:‘../../images/banner.jpg‘,
      },
      {
        url:‘../../images/banner.jpg‘,
      },
      {
        url:‘../../images/banner.jpg‘,
      },
    ],

yearSwiperChange(e) {

let current = e.detail.current;

let that = this;

that.setData({

swiperCurrent: current,

})

},

原文地址:https://www.cnblogs.com/liujun1128/p/10730310.html

时间: 2024-10-04 16:31:06

小程序轮播图中间大两边小的相关文章

图解微信小程序---轮播图

图解微信小程序---轮播图 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加wx:for-item="it"来改变默认的item名 优化 原文地址:https://www.cnblogs.com/cainiao-chuanqi/p/11604314.html

微信小程序轮播图

我们开发web页面的时候,无论是图片还是模块,很多时候会用到轮播,那么下面是微信小程序的轮播功能,也是小程序自带的swiper轮播功能. 下面是轮播展示图: 熟悉一下swiper配置属性,这里的配置属性和我们平时用的轮播插件配置属性差别不大:(点击查看微信小程序开发文档) 首先是在wxml文件中加入swiper模块(我这里是把内容模块循环出来的): <swiper class='swiper' indicator-dots='true' autoplay='true' interval='300

小程序轮播图部分

轮播图 <view class="swiper-container"> <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange" current="{{swiperCurrent}}" style="heig

微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-dots:是否显示面板指示点 autoplay:是否自动切换 interval:自动切换时间间隔 circular:是否采用衔接滑动 duration:滑动动画时长 更多属性请查看官网 <swiper indicator-dots="{{indicatorDots}}" autopla

小程序-轮播图案例

为了方便我以后项目的使用 wxml: autoplay="true"自动播放 circular="true"   采用协接滑动 indicator-dots="true"   显示圆点 indicator-color="#ff0000" 圆点颜色红色 indicator-active-color="#fff"   圆点激活白色 <swiper class='IMGbox' autoplay="

小程序轮播图

html部分 <view class="container"> <view class="swiper"> <swiper indicator-dots="{{indicatorDots}} autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:

小程序轮播图显示三个数据

//专家团队 getZhuanjia: function () { var that = this; app.util.request({ "url": "entry/wxapp/YuZhuanjia", success: function (res) { var big = res.data.data; var length = big.length; var num = parseInt(length / 3); var arr = []; for (var i

小程序 轮播图 swiper 使用

个人示例 <swiper autoplay="true" indicator-dots="{{true}}" class="ad-swiper" indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#FFF"> <block wx:for="{{advertisements}}" wx:ke

JS原生带小白点轮播图

咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: 300px; position: absolute; } li{ float: left; list-style: none; } img{ width: 500px; height: 300px; } div{ width: 500px; height: 300px; margin: 50px a