精华内容
下载资源
问答
  • 使用swiper时,需求要把轮播图上的指示点要做成自定义和数字的,做个笔记记录下。 自定义指示点 <template name="swiperBox"> <view class="swiperUnit"> <swiper @change="swiperChange" :...

    使用swiper时,需求要把轮播图上的指示点要做成自定义和数字的,做个笔记记录下。

    自定义指示点

    在这里插入图片描述

    <template name="swiperBox">
    	<view class="swiperUnit">
    		<swiper @change="swiperChange"  :interval="4000" :duration="400" class="swiper">
    			<swiper-item v-for="(item , index) in swiperList" :key="index">
    				<navigator class="swiper" :url="`/pages/details/${item.url}`">
    					<image :src="item.img"></image>
    				</navigator>
    			</swiper-item>
    		</swiper>
    		<view class="rowDot">
    			<view v-for="(item , index) in swiperList" :key="index" class="dots">
    				<view :class="['dot', index === swiperCurrent ? 'active' : '']"></view>  
    			</view> 
    		</view>
    	</view>
    </template>
    
    export default{
    		name:"swiperBox",
    		props:{
    				swiperList:{
    					url:{
    						type: String,
    						default: ''
    					},
    					img:{
    						type: String,
    						default: ''
    					}
    				}
    			},
    		data(){
    			return{
    				current: 0,
    				swiperCurrent: 0
    			}
    		},
    		methods:{
    			 swiperChange (e) {
    			    this.swiperCurrent = e.detail.current
    			  }
    		}
    	}
    
    .swiperUnit{
    	.swiper {
    	  width: 100%;
    	  height: 400rpx;
    	  image {
    		width: 100%;
    		height: 100%;
    		border-radius: 10rpx;
    	  }
    	}
    	.rowDot{
    		display: flex;
    		position: absolute;
    		bottom: 20rpx;
    		left: calc((100% - 144rpx) / 2);
    		.dots{
    			flex-direction: row;
    			justify-content: center;
    			align-items: center;
    			align-content: center;
    			.dot {
    			  margin-right:8rpx;
    			  width: 40rpx;
    			  height: 8rpx;
    			  opacity: 1;
    			  border-radius: 6rpx;
    			  background: #fff5f9;
    			}
    			.dot.active {
    			  background: #ff4e54;
    			} 
    		}
    	}
    }	
    

    数字胶囊指示点

    在这里插入图片描述

    <template name="swiperDots">
    		<view class="swiper" >
    			<!--轮播 -->
    			<swiper @change="SwiperTab" :current="uCurrent" :indicator-dots="false" :interval="4000" :duration="400" :autoplay="true" class="swiper">
    				<swiper-item v-for="(item,index) in swiperList " :key="index"  >
    					<image :src="item.img"></image>
    				</swiper-item>
    			</swiper>	
    			<!-- 更改指示器样式指示器:数字胶囊 -->
    			<block class="number"  >	
    				<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ swiperList.length }}</view>	
    				/*uCurrent + 1 指向当前显示的轮播图下标*/
    				/*swiperList.length 轮播图页数*/ 
    			</block>
    		</view>
    </template>
    
    
    export default{
    	name:"swiperDots",
    	props:{
    		swiperList:Array,
    		mode:String
    	},
    	data(){
    		return{
    			uCurrent:0
    		}
    	},
    	methods:{
    		SwiperTab(e){
    			this.uCurrent =Number(e.target.current)
    			console.log(this.uCurrent);
    		}
    	}
    }
    
    .swiper {
      width: 100%;
      height: 600rpx;
      position: relative;
      image {
    	width: 100%;
    	height: 100%;
      }
      /* 指示器样式 */
      .u-indicator-item-number {
      	width: 40px;
      	padding: 10rpx;
      	line-height: 1;
      	background-color: rgba(0, 0, 0, 0.3);
      	border-radius: 100rpx;
      	font-size: 30rpx;
      	color: rgba(255, 255, 255, 0.8);
      	position: absolute;
      	right: 2%;
      	bottom: 3%;
      	text-align: center;
    	letter-spacing: 3rpx;
      }
    }
    

    以上两种是在做项目的时候遇到的,记录下,写的不好的话,欢迎大家点评指正。

    展开全文
  • 小程序swiper修改指示点样式 小程序修改swiper指示点样式,实在无法忍受网上乱七八糟,很简单,几行样式就可以了,整的那么麻烦,有那空,睡会儿他不香,翻到这个文章的就别再找了,我这就是你要的答案 效果: 代码...

    小程序swiper修改指示点样式

    小程序修改swiper指示点样式,实在无法忍受网上乱七八糟,很简单,几行样式就可以了,整的那么麻烦,有那空,睡会儿他不香,翻到这个文章的就别再找了,我这就是你要的答案
    效果:在这里插入图片描述
    代码:在这里插入图片描述

    /* 默认指示点的样式 */
    .swiper .wx-swiper-dot {
      width: 12rpx;
      height: 12rpx;
      background: #eaeaea;
      border-radius: 50%;
    }
    
    /* 选中指示点的样式 */
    .swiper .wx-swiper-dot.wx-swiper-dot-active {
      width: 12rpx;
      height: 12rpx;
      background: #1890ff;
      border-radius: 50%;
    }
    
    展开全文
  • uni-app 自定义轮播图 swiper 指示点位置和样式

    千次阅读 热门讨论 2021-09-01 15:36:48
    <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> //设置轮播的指示点大小 ...

    本文介绍一种简单的方法:深度作用选择器 /deep/
    *很多评论说没有效果,于是重新看了一下自己的代码,发现不是自己代码问题,所以请你们先仔细看看自己的代码再来评论

    <swiper class="uni-swiper-wrapper" indicator-dots circular autoplay interval=3000>
    	<swiper-item v-for="(item,index) in swipers" :key="index">
    		<image :src="item.src"></image>
    	</swiper-item>
    </swiper>
    
    //设置轮播的指示点大小
    	.uni-swiper-wrapper {
    
    		/deep/ .uni-swiper-dots {
    			// 指示点整个区域的位置
    			top: 310rpx;
    		}
    
    		/deep/ .uni-swiper-dot {
    			// 指示点元素默认样式
    			width: 9upx !important;
    			height: 9upx !important;
    			background: #C0C0C0 !important;
    		}
    
    		/deep/ .uni-swiper-dot-active {
    			// 指示点元素激活(当前选中)状态样式
    			width: 32upx !important;
    			height: 8upx !important;
    			background: #42E2CD !important;
    			border-radius: 4rpx;
    		}
    	}
    

    效果:
    在这里插入图片描述
    *很多评论说没有效果,于是重新看了一下自己的代码,发现不是自己代码问题,所以请你们先仔细看看自己的代码再来评论

    //设置轮播的指示点大小
    	.uni-swiper-wrapper {
    
    		/deep/ .uni-swiper-dots {
    			// 指示点整个区域
    			top: 280rpx;    // 比较原先代码 - 修改后为280rpx
    		}
    
    		/deep/ .uni-swiper-dot {
    			// 指示点元素默认样式
    			width: 18upx !important;   //  比较原先代码 - 修改后为18upx
    			height: 18upx !important;   //  比较原先代码 - 修改后为18upx
    			background: #000000 !important;  // 比较原先代码 - 修改背景颜色
    			// border: 1rpx solid #E0B079;
    		}
    
    		/deep/ .uni-swiper-dot-active {
    			// 指示点元素激活(当前选中)状态样式
    			// background: #CD9763;
    			width: 40upx !important;  // 比较原先代码 - 修改后为40upx
    			height: 8upx !important;
    			background: #42E2CD !important;
    			border-radius: 4rpx;
    		}
    	}
    

    在这里插入图片描述

    展开全文
  • <swiper class="active-areaswiper"></swiper> .wxss /* 默认的样式 */ .active-areaswiper .wx-swiper-dot { width: 8rpx;....active-areaswiper .wx-swiper-dot.wx-swiper-dot-active
    <swiper class="active-areaswiper"></swiper>
    
    
    
    .wxss
    /* 默认的样式 */
    .active-areaswiper .wx-swiper-dot {
    	width: 8rpx;
    	height: 8rpx;
    	background: #DFDFDF;
    	border-radius: 4rpx;
    }
    
    /* 选中的样式 */
    .active-areaswiper .wx-swiper-dot.wx-swiper-dot-active {
    	width: 16rpx;
    	height: 8rpx;
    	background: #34AD18;
    	border-radius: 4rpx;
    }
    

    在这里插入图片描述

    展开全文
  • } //设置轮播的指示点大小 .uni-swiper-wrapper { /deep/ .uni-swiper-dots { // 指示点整个区域 // bottom: 100rpx; } /deep/ .uni-swiper-dot { // 指示点元素默认样式 width: 10upx !important; height: 10upx ...
  • //设置轮播的指示点大小 /* wx */ wx-swiper .wx-swiper-dot { position: relative; right: -260rpx; } // wx-swiper .wx-swiper-dot-active { // background-color: #000; // width: 20px; //
  • wxmlcss.wrap {height: auto;position: relative;width: 100%;}.swipers {height: 350rpx;width: 100%;}.slide-image {display: block;width: 100%;height: 100%;}/*用来包裹所有的小圆点 */.dots {width: 300rpx;...
  • CSS实现轮播图指示点原地扩张效果 最近在做模拟中酒网网站的练习,中酒网首页的主轮播图中有一组横向排列的指示点,在鼠标悬浮或划过时,对应圆点会呈扩张效果。因为之前没有做过类似的效果,所以特别想实现一下。 ...
  • uniapp项目需要改变swiper指示点的样式 问题描述: 使用uniapp组件库里面的swiper组件时,发现在组件内无法使用类名对swiper的指示点进行样式修改 原因分析: 组件内无法强制修改uniapp组件库的组件(emmmmm。。...
  • 图居中、圆边角、指示点颜色更改、指示点样式更改 下图是样式不好看的组件 要修改成这样:: wxml: <swiper class="bd" indicator-dots="{{true}}" indicator-active-color="#ff8f00" autoplay="{{true}}" ...
  • 官方文档里,swiper的指示点默认是圆形,且只能修改其颜色。如果要修改形状,有两种思路:1.隐藏官方的面板指示点(官方有提供属性可以隐藏),自己用view重写组件2.弄清swiper里控制指示点的类,并对其中样式进行修改...
  • .swiper .wx-swiper-dot{ height: 12rpx; width: 12rpx; background: red } .swiper .wx-swiper-dot-active{ width: 36rpx; height: 12rpx; border-radius: 6rpx; background: pink }
  • uni-app中swiper的指示点自定义

    千次阅读 2021-01-04 14:22:11
    在平时工作中,有时候uni-app中swiper的指示点的样式位置可能需要我们自定义, 类似于 <swiper class="swiper" circular="true" previous-margin="48rpx" next-margin="21rpx" @change='intervalChange' :...
  • /* 轮播图指示点样式 */ .bgBox .wx-swiper-dots.wx-swiper-dots-horizontal{ //控制指示点向下的距离 margin-bottom: 78rpx; } .wx-swiper-dots{ //控制指示点左右的位置 position:relative; left: unset!important...
  • 直接在app.vue 里面进行修改 ...// 默认指示点样式 wx-swiper .wx-swiper-dot { position: relative; bottom: 24rpx; } // 当前选中样式 wx-swiper .wx-swiper-dot-active { background-color: #388BF5; }
  • 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示...
  • 样式代码(我采用的是scss) wx-swiper { .wx-swiper-dots{ //设置指示点的位置 bottom: 0rpx; } .wx-swiper-dot { //指示点样式 width: 30rpx; height: 6rpx; border-radius: 2rpx; } ....
  • 加到你想变换的那个vue文件里面就好!!! 加到你想变换的那个vue文件里面就好!!! 加到你想变换的那个vue文件里面就好!!! /* #ifdef APP-PLUS */ uni-swiper .uni-swiper-dot { width: 10rpx;...
  • 一、首先我们先去到微信官方文档,引入swiper组件 {XXX}}" wx:key="index"> {item.XXX}}"> 二、开始自定义轮播图中的指示点的样式 1、.wx-swiper-dots 是小圆点指示器的父容器 2、.wx-swiper-dot 是圆点指示器一个点...
  • uniapp组件-uni-swiper-dot轮播图指示点

    千次阅读 2021-02-21 00:44:44
    官方:uni-swiper-dot 轮播图指示点 - DCloud 插件市场 注意:上面属性中的mode为nav时,uni-swiper-dot标签中的 field字段必须指定值,这里是info中的"content" mode属性值有:default 、round 、 indexes、nav ...
  • 查看uni-app官网文档找到设置的背景与选中的属性为indicator-color、indicator-active-color,直接如下图所示进行设置, <swiper class="swiper" style="height:100px;" :autoplay="true" ...
  • uni-app自定义指示点所需理解参数意义在项目中使用 所需理解参数意义 current 当前所在滑块的index autoplay 是否自动切换 interval 自动切换事件间隔 @change current改变时会触发change事件 duration 滑动动画时...
  • 1.实现效果 2.实现原理 修改swpier原生指示点的样式。 .wx-swiper-dots.wx-swiper-dots-horizontal .wx-swiper-dot .wx-swiper-dot::before .wx-swiper-dot-active 3.完整代码(更多代码请移至码云) ...
  • XBanner主要功能:支持一屏显示多个支持根据服务端返回的数据动态设置广告条的总页数支持大于等于1页时的无限循环自动轮播、手指按下暂停轮播、抬起手指开始轮播支持自定义状态指示点位置 左 、中 、右支持自定义...
  • XBanner主要功能:支持一屏显示多个支持根据服务端返回的数据动态设置广告条的总页数支持大于等于1页时的无限循环自动轮播、手指按下暂停轮播、抬起手指开始轮播支持自定义状态指示点位置 左 、中 、右支持自定义...
  • 微信小程序自定义轮播图指示点颜色简易版! 作为一个刚上班的小白,拿小程序来练手,突然发现轮播图指示点要改了好看上往百度了好久,都是把指示点隐藏然后新设置样式和颜色.作为一个只想改颜色的人,那些都不符合我. 话...
  • I am using Bootstrap 4 Beta 2 version to do a carousel. The code looks like below:And the carousel indicator show as lines:Is there a way I can change the indicators into dots instead of lines?...
  • DotLoopViewpager小圆点指示器的viewpager,使用非常方便,自动轮播图片,dot circle indicator viewpager auto looping一.特点小圆点指示器,支持自动轮播,触摸是停止轮播,抬起手再次开始轮播非常强的自定义属性,可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 307,066
精华内容 122,826
关键字:

指示点