12 changed files with 496 additions and 615 deletions
Split View
Diff Options
-
+76 -165components/virtualScroll/virtualScroll.vue
-
+0 -132components/virtualScroll1/virtualScroll1.vue
-
+1 -0package.json
-
+91 -318pages/home/home.vue
-
BINstatic/home/bg.jpeg
-
BINstatic/home/bg1.jpg
-
BINstatic/home/language.png
-
BINstatic/home/product.jpg
-
+12 -0uni_modules/uni-swiper-dot/changelog.md
-
+218 -0uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
-
+87 -0uni_modules/uni-swiper-dot/package.json
-
+11 -0uni_modules/uni-swiper-dot/readme.md
+ 76
- 165
components/virtualScroll/virtualScroll.vue
View File
| @ -1,184 +1,95 @@ | |||
| <!-- 首页虚拟滚动 --> | |||
| <template> | |||
| <view :style="{ height : tableListSize < visibleSize ? tableListSize * lineHeight + getRpxToPx(65) + 'px' : '560rpx' }" class="virtualScroll content"> | |||
| <view class="success_info_body"> | |||
| <!-- 标准title可以调用组件 --> | |||
| <view class="title_view"> | |||
| {{ $t('page.virtualScroll.title') }} | |||
| </view> | |||
| <!-- 参数名称、列数根据实际情况调整 --> | |||
| <view class="table_body"> | |||
| <view :style="{ height : tableListSize < visibleSize ? tableListSize * lineHeight + 'px' : '480rpx'}" class="table_main_body"> | |||
| <view class="table_inner_body" :class="{ animate }" :style="{ transform: 'translateY(' + tableTop + 'px)' , height : tableListSize < visibleSize ? tableListSize * lineHeight + 'px' : '480rpx'}"> | |||
| <view class="table_tr" v-for="(item,index) in tableList" :key="index"> | |||
| <view class="tr1 tr">{{item.auccont}}</view> | |||
| <view class="tr2 tr">{{item.money}}</view> | |||
| <view class="tr3 tr" v-if="item.createTime">{{item.createTime}}</view> | |||
| <view class="tr3 tr" v-else>-</view> | |||
| </view> | |||
| </view> | |||
| <vue-seamless-scroll :data="listData" :class-option="classOption" class="warp"> | |||
| <ul class="item"> | |||
| <li v-for="(item, index) in listData" :key="index"> | |||
| <view class="content"> | |||
| <span class="title" v-text="item.title"></span> | |||
| <span class="date" v-text="item.date"></span> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </li> | |||
| </ul> | |||
| </vue-seamless-scroll> | |||
| </template> | |||
| <script> | |||
| import vueSeamlessScroll from 'vue-seamless-scroll' | |||
| export default { | |||
| name: 'Example01Basic', | |||
| components: { | |||
| vueSeamlessScroll | |||
| }, | |||
| data() { | |||
| return { | |||
| tableTimer: null, | |||
| tableTop: 0, | |||
| tableList: [], | |||
| tableListSize: 0, | |||
| componentTimer: null, | |||
| //需要根据情况设置的参数 | |||
| visibleSize: 3, //容器内可视最大完整行数 | |||
| //这里分三个比分写对应样式的高、下外边距、边框计算。直接整体计算有些误差 | |||
| lineHeight: this.getRpxToPx(140) + this.getRpxToPx(20) + this.getRpxToPx(2), //每行的实际高度（包含margin-top/bottom,border等） | |||
| componentTimerInterval: 3600000, //刷新数据的时间间隔 | |||
| tableTimerInterval: 1000, //向上滚动 1px 所需要的时间，越小越快，推荐值 100 | |||
| animate : true | |||
| } | |||
| }, | |||
| mounted() { | |||
| clearInterval(this.componentTimer); | |||
| this.bsGetProductProcess(); | |||
| }, | |||
| beforeDestroy() { | |||
| clearInterval(this.componentTimer); | |||
| clearInterval(this.tableTimer); | |||
| }, | |||
| methods: { | |||
| //调用数据接口，获取列表数据 | |||
| bsGetProductProcess() { | |||
| clearInterval(this.tableTimer); | |||
| this.tableTop = 0; | |||
| this.request('getIndexScroll').then(res => { | |||
| if(res.code == 200){ | |||
| this.tableList = res.result | |||
| this.tableActionFun(); | |||
| } | |||
| }) | |||
| }, | |||
| tableActionFun() { | |||
| this.tableListSize = this.tableList.length; //数据总数 | |||
| this.tableList = this.tableList.concat(this.tableList); //拼接一个数组数据 | |||
| this.tableTimerFun(); | |||
| }, | |||
| //控制元素滚动 | |||
| tableTimerFun() { | |||
| var count = 0; | |||
| this.tableTimer = setInterval(() => { | |||
| if (count < (this.tableList.length / 2) * this.lineHeight) { | |||
| this.animate = true | |||
| this.tableTop -= this.lineHeight | |||
| count += this.lineHeight | |||
| } else { | |||
| this.animate = false | |||
| this.tableTop = 0; | |||
| count = 0; | |||
| } | |||
| }, this.tableTimerInterval); | |||
| }, | |||
| //转换rpx单位 | |||
| getRpxToPx(rpx) { | |||
| // 获取系统信息，这里使用同步方法uni.getSystemInfoSync | |||
| const systemInfo = uni.getSystemInfoSync(); | |||
| // 假设设计稿宽度为750rpx | |||
| const designWidth = 750; | |||
| // 屏幕宽度，单位为px | |||
| let screenWidth = systemInfo.screenWidth; | |||
| //防止屏幕过大时转换的值太大。超过960就设置screenWidth为版心宽度 | |||
| if(screenWidth > 960){ | |||
| screenWidth = 375 | |||
| listData: [{ | |||
| 'title': 'Get a commission', | |||
| 'date': '666' | |||
| }, { | |||
| 'title': 'Get a commission16' | |||
| }, { | |||
| 'title': 'Get a commission', | |||
| 'date': '777' | |||
| }, { | |||
| 'title': 'Get a commission', | |||
| 'date': '888' | |||
| }, { | |||
| 'title': 'Get a commission', | |||
| 'date': '999' | |||
| }, { | |||
| 'title': 'Get a commission', | |||
| 'date': '111' | |||
| }, { | |||
| 'title': 'Get a commission', | |||
| 'date': '222' | |||
| }, { | |||
| 'title': 'Get a commission', | |||
| 'date': '333' | |||
| }, { | |||
| 'title': 'Get a commission', | |||
| 'date': '4444' | |||
| }], | |||
| classOption: { | |||
| step: .5 | |||
| } | |||
| // 计算1rpx等于多少px | |||
| const rpxToPx = screenWidth / (designWidth / rpx); | |||
| return parseInt(rpxToPx); | |||
| } | |||
| } | |||
| }, | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .virtualScroll { | |||
| width: 100%; | |||
| } | |||
| .content { | |||
| width: 96%; | |||
| .warp { | |||
| height: 100%; | |||
| width: 80%; | |||
| margin: 0 auto; | |||
| color: $uni-bg-color-app; | |||
| } | |||
| .title_view { | |||
| display: flex; | |||
| align-items: center; | |||
| width: 100%; | |||
| font-size: 32rpx; | |||
| height: 50rpx; | |||
| } | |||
| .table_body { | |||
| width: 100%; | |||
| margin-top: 15rpx; | |||
| } | |||
| .tr { | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| white-space: nowrap; | |||
| box-sizing: border-box; | |||
| padding: 0 5px; | |||
| text-align: center; | |||
| font-size: 30rpx; | |||
| } | |||
| .tr1 { | |||
| width: 28%; | |||
| } | |||
| .tr2 { | |||
| width: 22%; | |||
| } | |||
| .tr3 { | |||
| width: 50%; | |||
| font-size: 24rpx; | |||
| } | |||
| .table_main_body { | |||
| width: 100%; | |||
| overflow: hidden; | |||
| } | |||
| .table_inner_body { | |||
| width: 98%; | |||
| margin-left: 1%; | |||
| } | |||
| .animate{ | |||
| transition: all .3s; | |||
| } | |||
| .table_tr { | |||
| display: flex; | |||
| align-items: center; | |||
| height: 140rpx; | |||
| color: $uni-bg-color-app; | |||
| font-size: 30rpx; | |||
| margin-bottom: 20rpx; | |||
| // box-shadow: 2rpx 2rpx 6rpx 1rpx rgba(0, 0, 0, .1), | |||
| // -2rpx -2rpx 6rpx 1rpx rgba(0, 0, 0, .1); | |||
| border-radius: 10rpx; | |||
| background: $uni-bg-color; | |||
| border: 2rpx solid #ccc; | |||
| ul { | |||
| list-style: none; | |||
| padding: 0; | |||
| margin: 0 auto; | |||
| li, | |||
| a { | |||
| display: flex; | |||
| align-items: center; | |||
| height: 60rpx; | |||
| justify-content: space-between; | |||
| font-size: 15px; | |||
| border-radius: 15rpx; | |||
| overflow: hidden; | |||
| .content { | |||
| height: 50rpx; | |||
| width: 100%; | |||
| background: rgba(255, 255, 255, .5); | |||
| box-sizing: border-box; | |||
| padding: 0rpx 10% 0rpx 30%; | |||
| span{ | |||
| margin-left: 15rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 0
- 132
components/virtualScroll1/virtualScroll1.vue
View File
| @ -1,132 +0,0 @@ | |||
| <!-- 虚拟滚动组件 --> | |||
| <template> | |||
| <view class="virtualScroll"> | |||
| <view class="virtualScroll-title">{{ $t('page.virtualScroll.title') }}</view> | |||
| <!-- 滚动列表 --> | |||
| <view | |||
| :style="{ height : scrollListLength >= maxShowNumber ? `${ maxShowNumber * 160 }rpx` : `${scrollListLength * 164}rpx` }" | |||
| class="scroll-list"> | |||
| <view :class="{ animate }" :style="{ transform : `translate(0rpx,${ -scrollPostion }rpx)`}"> | |||
| <!-- 主要数据 --> | |||
| <view class="scroll-list-main-data"> | |||
| <view ref="scrollItem" v-for="item in scrollList" :key="item.id" class="scroll-item"> | |||
| <view class="user-name">{{ item.auccont }}</view> | |||
| <view class="money">{{ item.money }}</view> | |||
| <view class="time">{{ item.createTime }}</view> | |||
| </view> | |||
| </view> | |||
| <!-- 副本数据 --> | |||
| <view class="scroll-list-copy-data"> | |||
| <view v-for="item in scrollList" :key="item.id" class="scroll-item"> | |||
| <view class="user-name">{{ item.auccont }}</view> | |||
| <view class="money">{{ item.money }}</view> | |||
| <view class="time">{{ item.createTime }}</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| scrollList: [], //滚动的数据列表 | |||
| scrollListLength: 0, //滚动数据列表数据总数 | |||
| maxShowNumber: 3, //显示个数 | |||
| scrollInterval: null, //控制元素滚动的定时器 | |||
| topInterval: null, //返回顶部定时器 | |||
| scrollPostion: 0, //滚动位置 | |||
| animate: true, //是否显示延迟动画效果 | |||
| lineHeight: 0, //每个滚动元素的高度 | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.getScrollList() | |||
| }, | |||
| methods: { | |||
| //获取滚动列表 | |||
| async getScrollList() { | |||
| this.request('getIndexScroll').then(res => { | |||
| if (res.code == 200) { | |||
| this.scrollList = res.result | |||
| this.scrollListLength = res.result.length | |||
| this.scroll() | |||
| } | |||
| }) | |||
| }, | |||
| //控制元素滚动 | |||
| scroll() { | |||
| this.scrollInterval = setInterval(() => { | |||
| this.animate = true | |||
| this.scrollPostion += 160 | |||
| }, 1000) | |||
| this.topInterval = setInterval(() => { | |||
| if (this.scrollPostion > this.scrollListLength * 160) { | |||
| this.animate = false | |||
| clearInterval(this.scrollInterval) | |||
| clearInterval(this.topInterval) | |||
| this.scrollPostion = 0 | |||
| this.scroll() | |||
| } | |||
| }, 100) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .virtualScroll { | |||
| margin: 0rpx auto; | |||
| width: 96%; | |||
| .virtualScroll-title { | |||
| display: flex; | |||
| align-items: center; | |||
| font-size: 36rpx; | |||
| height: 80rpx; | |||
| color: $uni-bg-color-app; | |||
| } | |||
| .scroll-list { | |||
| overflow: hidden; | |||
| // 主要数据 、副本数据 | |||
| .scroll-list-main-data, | |||
| .scroll-list-copy-data { | |||
| padding-top: 20rpx; | |||
| .scroll-item { | |||
| display: flex; | |||
| align-items: center; | |||
| height: 140rpx; | |||
| width: 98%; | |||
| margin-left: 1%; | |||
| margin-bottom: 20rpx; | |||
| border-radius: 10rpx; | |||
| box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, .1), | |||
| -4rpx -4rpx 10rpx rgba(0, 0, 0, .1); | |||
| view { | |||
| flex: 1; | |||
| text-align: center; | |||
| &:nth-child(3) { | |||
| flex: 2; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .animate { | |||
| transition: all .4s linear; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 1
- 0
package.json
View File
+ 91
- 318
pages/home/home.vue
View File
BIN
static/home/bg.jpeg
View File
| Before | After |
|---|---|
|
|
| Width: 800 | Height: 449 | Size: 74 KiB |
BIN
static/home/bg1.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 800 | Height: 400 | Size: 88 KiB |
BIN
static/home/language.png
View File
| Before | After |
|---|---|
|
|
| Width: 128 | Height: 128 | Size: 4.9 KiB |
BIN
static/home/product.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 143 | Height: 320 | Size: 9.5 KiB |
+ 12
- 0
uni_modules/uni-swiper-dot/changelog.md
View File
| @ -0,0 +1,12 @@ | |||
| ## 1.2.0（2021-11-19） | |||
| - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||
| - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot) | |||
| ## 1.1.0（2021-07-30） | |||
| - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||
| ## 1.0.6（2021-05-12） | |||
| - 新增 示例地址 | |||
| - 修复 示例项目缺少组件的Bug | |||
| ## 1.0.5（2021-02-05） | |||
| - 调整为uni_modules目录规范 | |||
| - 新增 clickItem 事件，支持指示点控制轮播 | |||
| - 新增 支持 pc 可用 | |||
+ 218
- 0
uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
View File
| @ -0,0 +1,218 @@ | |||
| <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/2 +'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', | |||
| emits:['clickItem'], | |||
| 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: 6, | |||
| height: 6, | |||
| 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 = 14 | |||
| this.dots.height = 14 | |||
| } else { | |||
| this.dots.width = 6 | |||
| this.dots.height = 6 | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| if (this.mode === 'indexes') { | |||
| this.dots.width = 12 | |||
| this.dots.height = 12 | |||
| } | |||
| 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: rgba(0, 0, 0, 0.4); | |||
| /* #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: 26px; | |||
| padding: 8px 0; | |||
| /* #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: 14px; | |||
| 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: 12px; | |||
| line-height: 14px; | |||
| } | |||
| </style> | |||
+ 87
- 0
uni_modules/uni-swiper-dot/package.json
View File
| @ -0,0 +1,87 @@ | |||
| { | |||
| "id": "uni-swiper-dot", | |||
| "displayName": "uni-swiper-dot 轮播图指示点", | |||
| "version": "1.2.0", | |||
| "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": ["uni-scss"], | |||
| "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" | |||
| }, | |||
| "Vue": { | |||
| "vue2": "y", | |||
| "vue3": "y" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
+ 11
- 0
uni_modules/uni-swiper-dot/readme.md
View File
| @ -0,0 +1,11 @@ | |||
| ## SwiperDot 轮播图指示点 | |||
| > **组件名：uni-swiper-dot** | |||
| > 代码块： `uSwiperDot` | |||
| 自定义轮播图指示点 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot) | |||
| #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 | |||