init
This commit is contained in:
7
uni_modules/uni-swiper-dot/changelog.md
Normal file
7
uni_modules/uni-swiper-dot/changelog.md
Normal file
@@ -0,0 +1,7 @@
|
||||
## 1.0.6（2021-05-12）
|
||||
- 新增 示例地址
|
||||
- 修复 示例项目缺少组件的Bug
|
||||
## 1.0.5（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 clickItem 事件，支持指示点控制轮播
|
||||
- 新增 支持 pc 可用
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="uni-swiper__warp">
|
||||
<slot />
|
||||
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
|
||||
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
|
||||
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
|
||||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
|
||||
</view>
|
||||
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
|
||||
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
|
||||
'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
||||
:key="index" class="uni-swiper__dots-item" />
|
||||
</view>
|
||||
<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
|
||||
<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
|
||||
'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
||||
:key="index" class="uni-swiper__dots-item " />
|
||||
</view>
|
||||
<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
|
||||
<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
|
||||
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
|
||||
'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
|
||||
:key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* SwiperDod 轮播图指示点
|
||||
* @description 自定义轮播图指示点
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=284
|
||||
* @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
|
||||
* @property {String} mode = [default|round|nav|indexes] 指示点的类型
|
||||
* @value defualt 默认指示点
|
||||
* @value round 圆形指示点
|
||||
* @value nav 条形指示点
|
||||
* @value indexes 索引指示点
|
||||
* @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
|
||||
* @property {String} info 轮播图的数据，通过数组长度决定指示点个数
|
||||
* @property {Object} dotsStyles 指示点样式
|
||||
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniSwiperDot',
|
||||
props: {
|
||||
info: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
current: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
dotsStyles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 类型 ：default(默认) indexes long nav
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 只在 nav 模式下生效，变量名称
|
||||
field: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dots: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
bottom: 10,
|
||||
color: '#fff',
|
||||
backgroundColor: 'rgba(0, 0, 0, .3)',
|
||||
border: '1px rgba(0, 0, 0, .3) solid',
|
||||
selectedBackgroundColor: '#333',
|
||||
selectedBorder: '1px rgba(0, 0, 0, .9) solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dotsStyles(newVal) {
|
||||
this.dots = Object.assign(this.dots, this.dotsStyles)
|
||||
},
|
||||
mode(newVal) {
|
||||
if (newVal === 'indexes') {
|
||||
this.dots.width = 20
|
||||
this.dots.height = 20
|
||||
} else {
|
||||
this.dots.width = 8
|
||||
this.dots.height = 8
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
if (this.mode === 'indexes') {
|
||||
this.dots.width = 20
|
||||
this.dots.height = 20
|
||||
}
|
||||
this.dots = Object.assign(this.dots, this.dotsStyles)
|
||||
},
|
||||
methods: {
|
||||
clickItem(index) {
|
||||
this.$emit('clickItem', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-swiper__warp {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-box {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-item {
|
||||
width: 8px;
|
||||
border-radius: 100px;
|
||||
margin-left: 6px;
|
||||
background-color: $uni-bg-color-mask;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
/* #ifdef H5 */
|
||||
// border-width: 5px 0;
|
||||
// border-style: solid;
|
||||
// border-color: transparent;
|
||||
// background-clip: padding-box;
|
||||
/* #endif */
|
||||
// transition: width 0.2s linear; 不要取消注释，不然会不能变色
|
||||
}
|
||||
|
||||
.uni-swiper__dots-item:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-default {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-long {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-bar {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-nav {
|
||||
bottom: 0px;
|
||||
height: 40px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.uni-swiper__dots-nav-item {
|
||||
/* overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; */
|
||||
font-size: $uni-font-size-base;
|
||||
color: #fff;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-indexes {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
// flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-swiper__dots-indexes-text {
|
||||
color: #fff;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
</style>
|
||||
83
uni_modules/uni-swiper-dot/package.json
Normal file
83
uni_modules/uni-swiper-dot/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "uni-swiper-dot",
|
||||
"displayName": "uni-swiper-dot 轮播图指示点",
|
||||
"version": "1.0.6",
|
||||
"description": "自定义轮播图指示点组件",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"轮播图指示点",
|
||||
"dot",
|
||||
"swiper"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
91
uni_modules/uni-swiper-dot/readme.md
Normal file
91
uni_modules/uni-swiper-dot/readme.md
Normal file
@@ -0,0 +1,91 @@
|
||||
|
||||
|
||||
## SwiperDot 轮播图指示点
|
||||
> **组件名：uni-swiper-dot**
|
||||
> 代码块： `uSwiperDot`
|
||||
|
||||
|
||||
自定义轮播图指示点
|
||||
|
||||
> **注意事项**
|
||||
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||||
> - 本组件依赖 `swiper` 组件,请与`swiper`组件配合使用
|
||||
> - `width` 与 `height` 如非必要，请勿设置过大，或者过小
|
||||
> - `swiper-item` 尽量控制在一定数量之内，否则指示点可能会超出屏幕
|
||||
> - 暂不支持垂直方向的指示点
|
||||
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
|
||||
### 基本用法
|
||||
|
||||
在 ``template`` 中的使用
|
||||
|
||||
```html
|
||||
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
|
||||
<swiper class="swiper-box" @change="change">
|
||||
<swiper-item v-for="(item ,index) in info" :key="index">
|
||||
<view class="swiper-item">
|
||||
{{item.content}}
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
info: [{
|
||||
content: '内容 A'
|
||||
}, {
|
||||
content: '内容 B'
|
||||
}, {
|
||||
content: '内容 C'
|
||||
}],
|
||||
current: 0,
|
||||
mode: 'round',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### SwiperDod Props
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-: |
|
||||
|current |Number |0 |当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`|
|
||||
|mode |String |default|指示点的类型，可选值：default 、round 、nav 、 indexes |
|
||||
|field |String |- | mode 为 nav 时，显示的内容字段（mode = nav 时必填） |
|
||||
|info |Array |- |轮播图的数据，通过数组长度决定指示点个数 |
|
||||
|dotsStyles |Object |- |指示点样式 |
|
||||
|
||||
#### dotsStyles Options
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-: |
|
||||
|width |Number | 8 |指示点宽度 **在 mode = nav、mode = indexes 时不生效** |
|
||||
|bottom |Number | 10 |指示点距 `swiper` 底部的高度 |
|
||||
|color |Color | '#fff' |指示点前景色，**只在 mode = nav ，mode = indexes 时生效** |
|
||||
|backgroundColor |Color | 'rgba(0, 0, 0, .3)' |未选择指示点背景色 |
|
||||
|border |Border | '1px rgba(0, 0, 0, .3) solid' |未选择指示点边框样式 |
|
||||
|selectedBackgroundColor|Color | '#333' |已选择指示点背景色，**在 mode = nav 时不生效** |
|
||||
|selectedBorder |Border | '1px rgba(0, 0, 0, .9) solid' |已选择指示点边框样式，**在 mode = nav 时不生效** |
|
||||
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot](https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot)
|
||||
Reference in New Issue
Block a user