精华内容
下载资源
问答
  • uniapp轮播图
    2021-04-14 16:55:11

    复制到项目里就可以,把图片换成自己需要的,几张都可以,如果想改变大小 就在css下面改。

    <template>
    	<view class="swip">
    		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
    			:indicator-active-color="active_color" :circular="circular">
    			 	<swiper-item v-for="(item,index) in imgs" :key="index">
    			 		 <image :src="item.url" mode="" style="width:750rpx;height:385rpx;"></image>
    			 	</swiper-item>
    		</swiper>
    	</view>
    </template>
    
    <script>
    	export default {
    			name: "app-swiper",
    			data() {
    			return {
    				active_color: "#AE81FF", //当前选中的指示点颜色
    				indicatorDots: true, //是否显示面板指示点
    				autoplay: true, //是否自动切换
    				interval: 2000, //自动切换时间间隔
    				duration: 500, //滑动动画时长
    				circular: true, //是否采用衔接滑动,即播放到末尾后重新回到开头
    				imgs: [{
    						url: require("../../static/banner1.png"),
    					},
    					{
    						url: require("../../static/banner2.png"),
    					},
    					{
    						url: require("../../static/banner3.png"),
    					},
    					]
    			}
    	},
    	}
    </script>
    
    <style>
    	.swiper{
    	width: 750rpx;
    	height:385rpx;
    	}
    </style>
    
    
    更多相关内容
  • uniapp轮播图指示点

    2021-06-09 14:20:21
    } 方法 clickItem(e) { this.swiperDotIndex = e }, change(e) { this.current = e.detail.current }, //轮播图 onBanner(index) { console.log(22222, index); }, 下面...

    在标签里面写

    <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
    			:dots-styles="dotsStyles" field="content">
    			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="autoplay"
    				:interval="interval" :duration="duration">
    				<swiper-item v-for="(item, index) in info" :key="index">
    					<view :class="item.colorClass" class="swiper-item">
    						<image class="image" :src="item.url" mode="aspectFill" :draggable="false"
    							@click="onBanner(index)" />
    					</view>
    				</swiper-item>
    			</swiper>
    		</uni-swiper-dot>
    

    在data中定义

    data() {
    			return {
    				autoplay: true,
    				interval: 4000,  //这个就是轮播图4s自动轮播的
    				duration: 500,
    				info: [{
    						colorClass: 'uni-bg-red',
    						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmn01%2F041619234342%2F1Z416234342-4.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624600968&t=bec3c77ebb36cb2574ca057e793c11d5',
    						content: '内容 A'
    					},
    					{
    						colorClass: 'uni-bg-green',
    						url: 'https://pic.netbian.com/uploads/allimg/210517/203529-1621254929d7e6.jpg',
    						content: '内容 B'
    					},
    					{
    						colorClass: 'uni-bg-blue',
    						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fc%2F5670d1eee0bc7.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624601185&t=acdbdf14c827047c998b2a6993314012',
    						content: '内容 C'
    					}
    				],
    				current: 0,
    				mode: 'default'	
    			};
    		}
    

    方法

    			clickItem(e) {
    				this.swiperDotIndex = e
    			},
    			change(e) {
    				this.current = e.detail.current
    			},
    			//轮播图
    			onBanner(index) {
    				console.log(22222, index);
    			},
    			
    

    下面就是css样式

    @media screen and (min-width: 500px) {
    		.uni-swiper-dot-box {
    			margin-top: 20px;
    			width: 400px;
    			margin: 0 auto;
    			// margin-top: 8px;
    		}
    
    		.image {
    			width: 100%;
    		}
    	}
    	
    	.swiper-box {
    		border-radius: 10px;
    		// margin: 0 20upx;
    		height: 200px;
    	}
    
    	
    
    展开全文
  • 轮播图是大部分应用的一个常用的功能,常用于广告投放、产品展示、活动展示等等。漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用。废话少说,下面开始动手。业务需求: ...       轮播图是大部分应用的...
  • 效果: html代码: <swiper class="img-swipe" :autoplay="true" :circular="true" :indicator-dots="false" :interval="3000" :current="swiperCurrent" @change="swiperChange"> <swiper-item v...

    效果图:

    html代码:

    <swiper class="img-swipe" :autoplay="true" :circular="true" :indicator-dots="false" :interval="3000"
      :current="current" @change="swiperChange">
      <swiper-item v-for="(ad, index) in couponAds" :key="index">
        <img class="ad-imgs" :src="baseURLConfig.IMAGECDN + ad.image">
      </swiper-item>
    </swiper>
    <div class="dots-container">
      <div v-for="(ad, index) in couponAds" :key="index">
        <div :class="['dot', index === swiperCurrent ? 'active' : '']"></div>
      </div>
    </div>

    css样式:

    .img-swipe {
      width: 690rpx;
      height: 320rpx;
      border-radius: 16rpx;
    }
    .ad-imgs {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
    .ad-img {
      width: 690rpx;
      height: 320rpx;
      border-radius: 16rpx;
      z-index: 100;
    }
    .dots-container {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 24rpx;
      display: flex;
      justify-content: center;
    }
    .dot {
      margin: 0 8rpx;
      width: 12rpx;
      height: 12rpx;
      background: rgba(235, 237, 240, 0.3);
      opacity: 1;
      border: 2rpx solid #FFFFFF;
      border-radius: 8rpx;
    }
    .dot.active {
      background: #FFFFFF;
    }

    js代码:

    data() {
      return {
        couponAds: [
          {image: '/portal/image/2020-7-28/e37805a0d0a011ea917455c9a92580c3-thumb.jpg'},
          {image: '/portal/image/2020-5-18/71d40ec098ca11ea91cc172cf0202714-thumb.jpg'}
        ],
        current: 0,
        swiperCurrent: 0
      }
    },
    
    methods: {
      swiperChange (e) {
        this.swiperCurrent = e.detail.current
      }
    }

    注意:swiper的current值(current)一定不能和指示点的active index值(swiperCurrent)一致,否则会造成swiper抖动,闪烁。

    展开全文
  • uniapp】swiper 自定义轮播图指示点

    千次阅读 2020-12-04 14:09:44
    uniapp官方推荐的swiper组件,该组件能够更换轮播图指示点,比如这样: 插件地址: https://ext.dcloud.net.cn/plugin?id=284 这里想说的是,在微信小程序发现该组件有时在切换图片时会有抖动现象(一直在高速反复...

    前言

    • 调试基础库 2.12.0
    • 微信开发者工具 1.03.2008270
    • uniapp 开发者工具 HBuilderX 2.9.8

    uni-swipper-dot

    uniapp官方推荐的swiper组件,该组件能够更换轮播图指示点,比如这样:
    在这里插入图片描述
    插件地址: https://ext.dcloud.net.cn/plugin?id=284

    这里想说的是,在微信小程序发现该组件有时在切换图片时会有抖动现象(一直在高速反复切换图片)。

    要想获得美美的轮播图指示点,可以参考如下方案

    swiper组件支持对指示点换颜色

    <swiper 
        :autoplay="true" :circular="true" :interval="5000" :duration="1000" 
    	:indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="rgba(7, 193, 96, 0.7)" >
    	<swiper-item v-for="(item, index) in bannerList" :key="index" @click="clickItem(item)">
    		<view>
    			<image :src="item.coverImg" mode="widthFix" />
    		</view>
    	</swiper-item>
    </swiper>
    
    • indicator-color :指示点颜色
    • indicator-active-color : 当前指示点颜色
      在这里插入图片描述

    不止满足于换颜色时,可以这样做

    参考:详解微信小程序swiper小圆点默认样式改变

    展开全文
  • vue+uni-app轮播图.zip

    2021-03-29 15:40:12
    基于Vue实现的管理后台轮播图功能,支持轮播图风格和指示器样式修改;基于uni-app实现配置的小程序。
  • 2733636093&fm=26&gp=0.jpg'}, ], swiperKey:0, //轮播位置 } }, onLoad() { }, methods: { swiperChange(e){ // console.log(e.detail); this.swiperKey = e.detail.current } } } ....
  • 1.微信开发者工具>调试>调试微信开发者工具 2.在控制台输入 3.在弹出的框里找到相应节点 4.希望能帮到你 /* wx-swiper-dots wx-swiper-dots-horizontal */ wx-swiper .wx-swiper-dot-active... bac...
  • <template> <view class=""> <!-- 定位 --> <view class="search-view"> <image src="../../../static/coen/dingwei.svg" mode="widthFix"></image>...te...
  • <swiper class="uni-swiper-wrapper" indicator-dots circular autoplay interval=3000> (item,index) in swipers" :key="index"> <image :src="item.src">image> swiper-item> swiper> //设置轮播指示点大小 ...
  • uni-app 自定义轮播图 swiper 指示点位置
  • uniapp项目需要改变swiper指示点的样式 问题描述: 使用uniapp组件库里面的swiper组件时,发现在组件内无法使用类名对swiper的指示点进行样式修改 原因分析: 组件内无法强制修改uniapp组件库的组件(emmmmm。。...
  • uniapp轮播图(swiper)

    千次阅读 2021-10-19 15:51:45
    是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 indicator-active-color Color #000000 当前选中的指示点颜色 active-class String ...
  • ·要了解轮播图的属性可以点击此链接去官方文档查看详情,我修改的属性依次是是否有指示点指示点颜色,选中指示点的颜色,是否自动播放,自动播放毫秒数,切换时间 <template> <view> <swiper ...
  • uniapp网络请求/轮播图/scroll-view

    千次阅读 2020-03-10 17:40:17
    1.swiper轮播图 indicator-dots :是否显示面板指示点 autoplay :是否自动切换 interval :自动切换时间间隔 <template> <view> <swiper indicator-dots="true" autoplay="true" interval="2000"&...
  • 免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
  • 自定义指示点组件 // swiperDot.vue <template> <view class="dot-main"> <view :class="['dot-item',current==index?'active':'']" v-for="(item,index) in list" :key="index"></view>...
  • 领导要求将轮播图指示器改为:数字胶囊类型,在uview组件的u-swiper组件中有这一属性 :mode=“number” 。但是如果里面还要嵌套九宫格grid就不能应用u-swiper组件。此时就需要用uni-app中的swiper 进行到这步,...
  • 定义swiper-list组件, 两个页面, 一个是swiper-list, 一个是swiper-list-item <template> <swiper class="swiper-list" @change="change" :current='tabIndex'>...swiper-item class="swiper-list-...
  • 仿小红书轮播图指示器效果,uniapp制作源码,可以作为参考改为各种框架或原生功能
  • 这个效果我搞了整整两天时间,这个事情是uniapp的current和active-class使用时好像没有变化,不知道是它们有问题还是我使用的不对。 直接贴代码 下面展示一些 内联代码片。 html <swiper class="swiper-block" :...
  • mosowe-swiper:适用于uni-app的轮播图插件 轮播组件,本插件兼容H5、APP、微信小程序、支付宝小程序 组件功能 普通轮播(文本、图片,图文轮播,支持上下、左右轮播) 堆叠轮播(图片) 图片预览(图片) 数字角标...
  • 样式代码(我采用的是scss) wx-swiper { .wx-swiper-dots{ //设置指示点的位置 bottom: 0rpx; } .wx-swiper-dot { //指示点样式 width: 30rpx; height: 6rpx; border-radius: 2rpx; } ....

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 132
精华内容 52
关键字:

uniapp轮播图指示点