tui-swiper-dot swiper指示点 会员组件

介绍

swiper指示点，提供了常用的显示类型

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiSwiperDot from "@/components/thorui/tui-swiper-dot/tui-swiper-dot.vue"
export default {
	components:{
		tuiSwiperDot
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-swiper-dot": "/components/thorui/tui-swiper-dot/tui-swiper-dot"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

显示类型

通过 type 属性设置指示点的显示类型，默认值为1。

显示类型：1-dot， 2-index， 3-title， 4-右侧停靠index

<view class="tui-banner-swiper">
 <swiper class="tui-banner__height" @change="bannerChange" circular :indicator-dots="false" autoplay :interval="4000"
  :duration="150">
 	<block v-for="(item,index) in background" :key="index">
 		<swiper-item>
 			<view class="tui-swiper-item tui-banner__height" :class="[item]">Thor UI</view>
 		</swiper-item>
 	</block>
 </swiper>
 <tui-swiper-dot :type="2" :count="count" :current="current"></tui-swiper-dot>
</view>

// data 数据 及 方法
export default {
 data() {
 	return {
 		background: ['tui-bg__primary', 'tui-bg__green', 'tui-bg__white'],
 		current: 0,
 		count: 0
 	}
 },
 onLoad() {
 	this.count = this.background.length;
 },
 methods: {
 	bannerChange: function(e) {
 		this.current = e.detail.current;
 	}
 }
}

.tui-banner-swiper {
	position: relative;
}
.tui-swiper-item {
	width: 100%;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34rpx;
	font-weight: 600;
}

.tui-banner__height {
	height: 360rpx;
}

.tui-bg__primary {
	background-color: rgba(0, 0, 0, .8);
}

.tui-bg__green {
	background-color: #07c160;
}

.tui-bg__white {
	background-color: #F2F2F2;
	color: #000;
}

 <view class="tui-banner-swiper">
 	<swiper class="tui-banner__height" bindchange="bannerChange" circular indicator-dots="{{false}}" autoplay interval="{{4000}}"
 	 duration="{{150}}">
 		<block wx:for="{{background}}" wx:key="index">
 			<swiper-item>
 				<view class="tui-swiper-item tui-banner__height {{item}}">Thor UI</view>
 			</swiper-item>
 		</block>
 	</swiper>
 	<!--微信小程序-->
 	<tui-swiper-dot type="{{2}}" count="{{count}}" current="{{current}}"></tui-swiper-dot>
 </view>

// data 数据 及 方法
Page({
  data: {
    background: ['tui-bg__primary', 'tui-bg__green', 'tui-bg__white'],
    current: 0,
    count: 0
  },
 onLoad: function (options) {
     this.setData({
       count:this.data.background.length
     })
 },
bannerChange: function(e) {
  let current=e.detail.current
  this.setData({
    current:current
  })
}
})

.tui-banner-swiper {
	position: relative;
}
.tui-swiper-item {
	width: 100%;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34rpx;
	font-weight: 600;
}

.tui-banner__height {
	height: 360rpx;
}

.tui-bg__primary {
	background-color: rgba(0, 0, 0, .8);
}

.tui-bg__green {
	background-color: #07c160;
}

.tui-bg__white {
	background-color: #F2F2F2;
	color: #000;
}

// Make sure to add code blocks to your code group

TIP

使用组件需要将外层容器 position 设置为 非 static 值。详见示例 样式 .tui-banner-swiper。

Slots

插槽名称	插槽说明
-	-

Props

属性名	类型	说明	默认值
type	Number	显示类型：1-dot， 2-index， 3-title， 4-右侧停靠index	1
count	Number	总数，数组总长度	0
current	Number	当前swiper-item索引	0
currentTitle	String	当前swiper-item标题	-
left	String	left值	0
right	String	right值	auto
bottom	String	bottom值	30rpx
width	String	指示点[type in (1,2)]或外层盒子[type in (3,4)]宽度	16rpx
height	String	指示点[type in (1,2)]或外层盒子[type in (3,4)]高度	16rpx
radius	String	指示点圆角	50%
backgroundColor	String	背景色	#bfbfbf
activeBgColor	String	当前展示item背景色	#5677fc
color	String	字体颜色	#333
activeColor	String	当前展示item字体颜色，type=2时生效	#fff
size	Number	字体大小，单位rpx	28
margin	String	指示点margin值	0 8rpx
padding	String	padding值，type=3时生效	0 30rpx

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
-	-	-

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码