登录页功能完成
This commit is contained in:
田岩
@@ -0,0 +1,11 @@
|
||||
## 1.0.4（2023-12-06）
|
||||
1. 优化
|
||||
## 1.0.3（2023-12-06）
|
||||
1. 阻止事件冒泡问题
|
||||
## 1.0.2（2023-06-01）
|
||||
1. 修复点击触发两次事件的BUG
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-divider 分割线
|
||||
@@ -0,0 +1,45 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否虚线
|
||||
dashed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否细线
|
||||
hairline: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否以点替代文字，优先于text字段起作用
|
||||
dot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 内容文本的位置，left-左边，center-中间，right-右边
|
||||
textPosition: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// 文本内容
|
||||
text: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 文本大小
|
||||
textSize: {
|
||||
type: [String, Number],
|
||||
default: 14
|
||||
},
|
||||
// 文本颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#909399'
|
||||
},
|
||||
// 线条颜色
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#dcdfe6'
|
||||
},
|
||||
...uni.$uv?.props?.divider
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view
|
||||
class="uv-divider"
|
||||
:style="[$uv.addStyle(customStyle)]"
|
||||
@tap="click"
|
||||
>
|
||||
<uv-line
|
||||
:color="lineColor"
|
||||
:customStyle="leftLineStyle"
|
||||
:hairline="hairline"
|
||||
:dashed="dashed"></uv-line>
|
||||
<text
|
||||
v-if="dot"
|
||||
class="uv-divider__dot"
|
||||
>●</text>
|
||||
<text
|
||||
v-else-if="text"
|
||||
class="uv-divider__text"
|
||||
:style="[textStyle]"
|
||||
>{{text}}</text>
|
||||
<uv-line
|
||||
:color="lineColor"
|
||||
:customStyle="rightLineStyle"
|
||||
:hairline="hairline"
|
||||
:dashed="dashed"
|
||||
></uv-line>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
/**
|
||||
* divider 分割线
|
||||
* @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
|
||||
* @tutorial https://www.uvui.cn/components/divider.html
|
||||
* @property {Boolean} dashed 是否虚线 （默认 false ）
|
||||
* @property {Boolean} hairline 是否细线 （默认 true ）
|
||||
* @property {Boolean} dot 是否以点替代文字，优先于text字段起作用 （默认 false ）
|
||||
* @property {String} textPosition 内容文本的位置，left-左边，center-中间，right-右边 （默认 'center' ）
|
||||
* @property {String | Number} text 文本内容
|
||||
* @property {String | Number} textSize 文本大小 （默认 14）
|
||||
* @property {String} textColor 文本颜色 （默认 '#909399' ）
|
||||
* @property {String} lineColor 线条颜色 （默认 '#dcdfe6' ）
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
* @event {Function} click divider组件被点击时触发
|
||||
* @example <uv-divider :color="color">锦瑟无端五十弦</uv-divider>
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-divider',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
emits: ['click'],
|
||||
computed: {
|
||||
textStyle() {
|
||||
const style = {}
|
||||
style.fontSize = this.$uv.addUnit(this.textSize)
|
||||
style.color = this.textColor
|
||||
return style
|
||||
},
|
||||
// 左边线条的的样式
|
||||
leftLineStyle() {
|
||||
const style = {}
|
||||
// 如果是在左边，设置左边的宽度为固定值
|
||||
if (this.textPosition === 'left') {
|
||||
style.width = '80rpx'
|
||||
} else {
|
||||
style.flex = 1
|
||||
}
|
||||
return style
|
||||
},
|
||||
// 右边线条的的样式
|
||||
rightLineStyle() {
|
||||
const style = {}
|
||||
// 如果是在右边，设置右边的宽度为固定值
|
||||
if (this.textPosition === 'right') {
|
||||
style.width = '80rpx'
|
||||
} else {
|
||||
style.flex = 1
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// divider组件被点击时触发
|
||||
click() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
$uv-divider-margin: 15px 0 !default;
|
||||
$uv-divider-text-margin: 0 15px !default;
|
||||
$uv-divider-dot-font-size: 12px !default;
|
||||
$uv-divider-dot-margin: 0 12px !default;
|
||||
$uv-divider-dot-color: #c0c4cc !default;
|
||||
.uv-divider {
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: $uv-divider-margin;
|
||||
&__text {
|
||||
margin: $uv-divider-text-margin;
|
||||
}
|
||||
&__dot {
|
||||
font-size: $uv-divider-dot-font-size;
|
||||
margin: $uv-divider-dot-margin;
|
||||
color: $uv-divider-dot-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"id": "uv-divider",
|
||||
"displayName": "uv-divider 分割线 全面兼容小程序、nvue、vue2、vue3等多端",
|
||||
"version": "1.0.4",
|
||||
"description": "区隔内容的分割线，一般用于页面底部没有更多的提示。",
|
||||
"keywords": [
|
||||
"divider",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"分割线",
|
||||
"没有更多"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-line"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"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",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
## Divider 分割线
|
||||
|
||||
> **组件名：uv-divider**
|
||||
|
||||
区隔内容的分割线，一般用于页面底部"没有更多"的提示。
|
||||
|
||||
### <a href="https://www.uvui.cn/components/divider.html" target="_blank">查看文档</a>
|
||||
|
||||
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,5 @@
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
1. 新增线条组件
|
||||
@@ -0,0 +1,34 @@
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#d6d7d9'
|
||||
},
|
||||
// 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等
|
||||
length: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
},
|
||||
// 线条方向，col-竖向，row-横向
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'row'
|
||||
},
|
||||
// 是否显示细边框
|
||||
hairline: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px"
|
||||
margin: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 是否虚线，true-虚线，false-实线
|
||||
dashed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.line
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<view
|
||||
class="uv-line"
|
||||
:style="[lineStyle]"
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
/**
|
||||
* line 线条
|
||||
* @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
|
||||
* @tutorial https://www.uvui.cn/components/line.html
|
||||
* @property {String} color 线条的颜色 ( 默认 '#d6d7d9' )
|
||||
* @property {String | Number} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 ( 默认 '100%' )
|
||||
* @property {String} direction 线条的方向，row-横向，col-竖向 (默认 'row' )
|
||||
* @property {Boolean} hairline 是否显示细线条 (默认 true )
|
||||
* @property {String | Number} margin 线条与上下左右元素的间距，字符串形式，如"30px" (默认 0 )
|
||||
* @property {Boolean} dashed 是否虚线，true-虚线，false-实线 (默认 false )
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
* @example <uv-line color="red"></uv-line>
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-line',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
computed: {
|
||||
lineStyle() {
|
||||
const style = {}
|
||||
style.margin = this.margin
|
||||
// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
|
||||
if (this.direction === 'row') {
|
||||
// 此处采用兼容分开写，兼容nvue的写法
|
||||
style.borderBottomWidth = '1px'
|
||||
style.borderBottomStyle = this.dashed ? 'dashed' : 'solid'
|
||||
style.width = this.$uv.addUnit(this.length)
|
||||
if (this.hairline) style.transform = 'scaleY(0.5)'
|
||||
} else {
|
||||
// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
|
||||
style.borderLeftWidth = '1px'
|
||||
style.borderLeftStyle = this.dashed ? 'dashed' : 'solid'
|
||||
style.height = this.$uv.addUnit(this.length)
|
||||
if (this.hairline) style.transform = 'scaleX(0.5)'
|
||||
}
|
||||
style.borderColor = this.color
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uv-line {
|
||||
/* #ifndef APP-NVUE */
|
||||
vertical-align: middle;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uv-line",
|
||||
"displayName": "uv-line 线条 全面兼容小程序、nvue、vue2、vue3等多端",
|
||||
"version": "1.0.1",
|
||||
"description": "uv-line 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。",
|
||||
"keywords": [
|
||||
"uv-line",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"line",
|
||||
"线条"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"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",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
## Line 线条
|
||||
|
||||
> **组件名：uv-line**
|
||||
|
||||
此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
|
||||
|
||||
### <a href="https://www.uvui.cn/components/line.html" target="_blank">查看文档</a>
|
||||
|
||||
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,12 @@
|
||||
## 1.0.5（2023-11-15）
|
||||
1. 修复微信报错的BUG
|
||||
## 1.0.4（2023-11-14）
|
||||
1. 兼容全局设置rpx
|
||||
## 1.0.3（2023-08-19）
|
||||
1. 修复报错导致不能移动指示器的BUG
|
||||
## 1.0.2（2023-08-08）
|
||||
1. 修复vue2编译报错的BUG
|
||||
## 1.0.1（2023-07-21）
|
||||
1. 优化
|
||||
## 1.0.0（2023-07-21）
|
||||
1. 新增uv-scroll-liast 横向滚动表组件
|
||||
@@ -0,0 +1,29 @@
|
||||
// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
|
||||
const BindingX = uni.requireNativePlugin('bindingx')
|
||||
export default {
|
||||
methods: {
|
||||
// 此处不写注释，请自行体会
|
||||
nvueScrollHandler(e) {
|
||||
if (this.indicator) {
|
||||
const anchor = this.$refs['uv-scroll-list__scroll-view'].ref
|
||||
const element = this.$refs['uv-scroll-list__indicator__line__bar'].ref
|
||||
const scrollLeft = e.contentOffset.x
|
||||
const contentSize = e.contentSize.width
|
||||
const { scrollWidth } = this
|
||||
const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
|
||||
// 在安卓和iOS上，需要除的倍数不一样，iOS需要除以2
|
||||
const actionNum = this.$uv.os() === 'ios' ? 2 : 1
|
||||
const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${this.$uv.getPx(this.$uv.addUnit(barAllMoveWidth))}`
|
||||
BindingX.bind({
|
||||
anchor,
|
||||
eventType: 'scroll',
|
||||
props: [{
|
||||
element,
|
||||
property: 'transform.translateX',
|
||||
expression
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
export default {
|
||||
props: {
|
||||
// 指示器的整体宽度
|
||||
indicatorWidth: {
|
||||
type: [String, Number],
|
||||
default: 50
|
||||
},
|
||||
// 滑块的宽度
|
||||
indicatorBarWidth: {
|
||||
type: [String, Number],
|
||||
default: 20
|
||||
},
|
||||
// 是否显示面板指示器
|
||||
indicator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 指示器非激活颜色
|
||||
indicatorColor: {
|
||||
type: String,
|
||||
default: '#f2f2f2'
|
||||
},
|
||||
// 指示器的激活颜色
|
||||
indicatorActiveColor: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 指示器样式，可通过bottom，left，right进行定位
|
||||
indicatorStyle: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
...uni.$uv?.props?.scrollList
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
function scroll(event, ownerInstance) {
|
||||
// detail中含有scroll-view的信息，比如scroll-view的实际宽度，当前时间点scroll-view的移动距离等
|
||||
var detail = event.detail
|
||||
var scrollWidth = detail.scrollWidth
|
||||
var scrollLeft = detail.scrollLeft
|
||||
// 获取当前组件的dataset，说白了就是祸国殃民的腾xun搞出来的垃ji
|
||||
var dataset = event.currentTarget.dataset
|
||||
// 此为scroll-view外部包裹元素的宽度
|
||||
// 某些HX版本(3.1.18)，发现view元素中大写的data-scrollWidth，在wxs中，变成了全部小写，所以这里需要特别处理
|
||||
var scrollComponentWidth = dataset.scrollWidth || dataset.scrollwidth || 0
|
||||
// 指示器和滑块的宽度
|
||||
var indicatorWidth = dataset.indicatorWidth || dataset.indicatorwidth || 0
|
||||
var barWidth = dataset.barWidth || dataset.barwidth || 0
|
||||
// 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
|
||||
// 滑动距离(指示器的总宽度减去滑块宽度)的比值
|
||||
var x = scrollLeft / (scrollWidth - scrollComponentWidth) * (indicatorWidth - barWidth)
|
||||
setBarStyle(ownerInstance, x, dataset.unit)
|
||||
}
|
||||
|
||||
// 由于webview的无能，无法保证scroll-view在滑动过程中，一直触发scroll事件，会导致
|
||||
// 无法监听到某些滚动值，当在首尾临界值无法监听到时，这是致命的，因为错失这些值会导致滑块无法回到起点和终点
|
||||
// 所以这里需要对临界值做监听并处理
|
||||
function scrolltolower(event, ownerInstance) {
|
||||
ownerInstance.callMethod('scrollEvent', 'right')
|
||||
// 获取当前组件的dataset
|
||||
var dataset = event.currentTarget.dataset
|
||||
// 指示器和滑块的宽度
|
||||
var indicatorWidth = dataset.indicatorWidth || dataset.indicatorwidth || 0
|
||||
var barWidth = dataset.barWidth || dataset.barwidth || 0
|
||||
// scroll-view滚动到右边终点时，将滑块也设置为到右边的终点，它所需移动的距离为：指示器宽度 - 滑块宽度
|
||||
setBarStyle(ownerInstance, indicatorWidth - barWidth, dataset.unit)
|
||||
}
|
||||
|
||||
function scrolltoupper(event, ownerInstance) {
|
||||
var dataset = event.currentTarget.dataset
|
||||
ownerInstance.callMethod('scrollEvent', 'left')
|
||||
// 滚动到左边时，将滑块设置为0的偏移距离，回到起点
|
||||
setBarStyle(ownerInstance, 0, dataset.unit)
|
||||
}
|
||||
|
||||
function setBarStyle(ownerInstance, x, unit) {
|
||||
ownerInstance.selectComponent('.uv-scroll-list__indicator__line__bar') && ownerInstance.selectComponent('.uv-scroll-list__indicator__line__bar').setStyle({
|
||||
transform: unit == 'rpx' ? 'translateX(' + x + 'rpx)' : 'translateX(' + x + 'px)'
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
scroll: scroll,
|
||||
scrolltolower: scrolltolower,
|
||||
scrolltoupper: scrolltoupper
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view
|
||||
class="uv-scroll-list"
|
||||
ref="uv-scroll-list"
|
||||
>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<!-- nvue使用bindingX实现，以得到更好的性能 -->
|
||||
<scroller
|
||||
class="uv-scroll-list__scroll-view"
|
||||
ref="uv-scroll-list__scroll-view"
|
||||
scroll-direction="horizontal"
|
||||
:show-scrollbar="false"
|
||||
:offset-accuracy="1"
|
||||
@scroll="nvueScrollHandler"
|
||||
>
|
||||
<view class="uv-scroll-list__scroll-view__content">
|
||||
<slot />
|
||||
</view>
|
||||
</scroller>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
|
||||
<!-- 以上平台，支持wxs -->
|
||||
<scroll-view
|
||||
class="uv-scroll-list__scroll-view"
|
||||
scroll-x
|
||||
@scroll="wxs.scroll"
|
||||
@scrolltoupper="wxs.scrolltoupper"
|
||||
@scrolltolower="wxs.scrolltolower"
|
||||
:data-scrollWidth="scrollWidth"
|
||||
:data-barWidth="$uv.getPx(indicatorBarWidth)"
|
||||
:data-indicatorWidth="$uv.getPx(indicatorWidth)"
|
||||
:show-scrollbar="false"
|
||||
:upper-threshold="0"
|
||||
:lower-threshold="0"
|
||||
:data-unit="$uv.unit"
|
||||
>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
|
||||
<!-- 非以上平台，只能使用普通js实现 -->
|
||||
<scroll-view
|
||||
class="uv-scroll-list__scroll-view"
|
||||
scroll-x
|
||||
@scroll="scrollHandler"
|
||||
@scrolltoupper="scrolltoupperHandler"
|
||||
@scrolltolower="scrolltolowerHandler"
|
||||
:show-scrollbar="false"
|
||||
:upper-threshold="0"
|
||||
:lower-threshold="0"
|
||||
>
|
||||
<!-- #endif -->
|
||||
<view class="uv-scroll-list__scroll-view__content">
|
||||
<slot />
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
<view
|
||||
class="uv-scroll-list__indicator"
|
||||
v-if="indicator"
|
||||
:style="[$uv.addStyle(indicatorStyle)]"
|
||||
>
|
||||
<view
|
||||
class="uv-scroll-list__indicator__line"
|
||||
:style="[lineStyle]"
|
||||
>
|
||||
<view
|
||||
class="uv-scroll-list__indicator__line__bar"
|
||||
:style="[barStyle]"
|
||||
ref="uv-scroll-list__indicator__line__bar"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 避免报错 -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view v-else class="uv-scroll-list__indicator__line__bar"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script src="./scrollWxs.wxs" module="wxs" lang="wxs"></script>
|
||||
<script>
|
||||
/**
|
||||
* scrollList 横向滚动列表
|
||||
* @description 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
|
||||
* @tutorial https://www.uviewui.com/components/scrollList.html
|
||||
* @property {String | Number} indicatorWidth 指示器的整体宽度 (默认 50 )
|
||||
* @property {String | Number} indicatorBarWidth 滑块的宽度 (默认 20 )
|
||||
* @property {Boolean} indicator 是否显示面板指示器 (默认 true )
|
||||
* @property {String} indicatorColor 指示器非激活颜色 (默认 '#f2f2f2' )
|
||||
* @property {String} indicatorActiveColor 指示器的激活颜色 (默认 '#3c9cff' )
|
||||
* @property {String | Object} indicatorStyle 指示器样式，可通过bottom，left，right进行定位
|
||||
* @event {Function} left 滑动到左边时触发
|
||||
* @event {Function} right 滑动到右边时触发
|
||||
* @example
|
||||
*/
|
||||
// #ifdef APP-NVUE
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
import nvueMixin from "./nvue.js"
|
||||
// #endif
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
export default {
|
||||
name: 'uv-scroll-list',
|
||||
// #ifndef APP-NVUE
|
||||
mixins: [mpMixin, mixin, props],
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
mixins: [mpMixin, mixin, nvueMixin, props],
|
||||
// #endif
|
||||
data() {
|
||||
return {
|
||||
scrollInfo: {
|
||||
scrollLeft: 0,
|
||||
scrollWidth: 0
|
||||
},
|
||||
scrollWidth: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 指示器为线型的样式
|
||||
barStyle() {
|
||||
const style = {}
|
||||
// #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
|
||||
// 此为普通js方案，只有在非nvue和不支持wxs方案的端才使用、
|
||||
// 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
|
||||
// 滑动距离(指示器的总宽度减去滑块宽度)的比值
|
||||
const scrollLeft = this.scrollInfo.scrollLeft,
|
||||
scrollWidth = this.scrollInfo.scrollWidth,
|
||||
barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
|
||||
const x = scrollLeft / (scrollWidth - this.scrollWidth) * this.$uv.getPx(this.$uv.addUnit(barAllMoveWidth))
|
||||
style.transform = `translateX(${ x }px)`
|
||||
// #endif
|
||||
// 设置滑块的宽度和背景色，是每个平台都需要的
|
||||
style.width = this.$uv.addUnit(this.indicatorBarWidth)
|
||||
style.backgroundColor = this.indicatorActiveColor
|
||||
return style
|
||||
},
|
||||
lineStyle() {
|
||||
const style = {}
|
||||
// 指示器整体的样式，需要设置其宽度和背景色
|
||||
style.width = this.$uv.addUnit(this.indicatorWidth)
|
||||
style.backgroundColor = this.indicatorColor
|
||||
return style
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getComponentWidth()
|
||||
},
|
||||
// #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
|
||||
// scroll-view触发滚动事件
|
||||
scrollHandler(e) {
|
||||
this.scrollInfo = e.detail
|
||||
},
|
||||
scrolltoupperHandler() {
|
||||
this.scrollEvent('left')
|
||||
this.scrollInfo.scrollLeft = 0
|
||||
},
|
||||
scrolltolowerHandler() {
|
||||
this.scrollEvent('right')
|
||||
// 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
|
||||
// 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
|
||||
this.scrollInfo.scrollLeft = this.$uv.getPx(this.indicatorWidth) - this.$uv.getPx(this.indicatorBarWidth)
|
||||
},
|
||||
// #endif
|
||||
scrollEvent(status) {
|
||||
this.$emit(status)
|
||||
},
|
||||
// 获取组件的宽度
|
||||
async getComponentWidth() {
|
||||
// 延时一定时间，以获取dom尺寸
|
||||
await this.$uv.sleep(30)
|
||||
// #ifndef APP-NVUE
|
||||
this.$uvGetRect('.uv-scroll-list').then(size => {
|
||||
this.scrollWidth = size.width
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
const ref = this.$refs['uv-scroll-list']
|
||||
ref && dom.getComponentRect(ref, (res) => {
|
||||
this.scrollWidth = res.size.width
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
.uv-scroll-list {
|
||||
padding-bottom: 10px;
|
||||
&__scroll-view {
|
||||
@include flex;
|
||||
&__content {
|
||||
@include flex;
|
||||
}
|
||||
}
|
||||
&__indicator {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
&__line {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
&__bar {
|
||||
width: 20px;
|
||||
height: 4px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uv-scroll-list",
|
||||
"displayName": "uv-scroll-list 横向滚动列表 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.5",
|
||||
"description": "该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表，往往数量不确定，数量较多支持左右滚动。灵活配置，开箱即用。",
|
||||
"keywords": [
|
||||
"uv-scroll-list",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"横向滚动列表",
|
||||
"scroll-view"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"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",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
## ScrollList 横向滚动列表
|
||||
|
||||
> **组件名：uv-scroll-list**
|
||||
|
||||
该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表，往往数量不确定，数量较多支持左右滚动。灵活配置，开箱即用。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/scrollList.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@@ -0,0 +1,9 @@
|
||||
## 1.0.2（2023-11-02）
|
||||
1. **`uv-skeleton`不再维护，强烈推荐使用新版本`uv-skeletons`**
|
||||
2. 推荐大家使用新版骨架屏，作者已经运用到大量实战中了，绝对正品：[https://ext.dcloud.net.cn/plugin?name=uv-skeletons](https://ext.dcloud.net.cn/plugin?name=uv-skeletons)
|
||||
3. 新版本`uv-skeletons`的优点：灵活度非常高，直接配置数组就可以完成想要的布局，作者已经运用到大量实战中。鼓励老用户迁移新版本，有任何问题可以加Q群549833913交流。
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-skeleton 骨架屏
|
||||
@@ -0,0 +1,65 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示骨架组件
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启动画效果
|
||||
animate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 段落占位图行数
|
||||
rows: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 段落占位图的宽度
|
||||
rowsWidth: {
|
||||
type: [String, Number, Array],
|
||||
default: '100%'
|
||||
},
|
||||
// 段落占位图的高度
|
||||
rowsHeight: {
|
||||
type: [String, Number, Array],
|
||||
default: 18
|
||||
},
|
||||
// 段落占位图的左边距
|
||||
rowsLeft: {
|
||||
type: [String, Number, Array],
|
||||
default: 0
|
||||
},
|
||||
// 是否展示标题占位图
|
||||
title: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 段落标题的宽度
|
||||
titleWidth: {
|
||||
type: [String, Number],
|
||||
default: '50%'
|
||||
},
|
||||
// 段落标题的高度
|
||||
titleHeight: {
|
||||
type: [String, Number],
|
||||
default: 18
|
||||
},
|
||||
// 是否展示头像占位图
|
||||
avatar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 头像占位图大小
|
||||
avatarSize: {
|
||||
type: [String, Number],
|
||||
default: 32
|
||||
},
|
||||
// 头像占位图的形状，circle-圆形，square-方形
|
||||
avatarShape: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
...uni.$uv?.props?.skeleton
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="uv-skeleton">
|
||||
<view
|
||||
class="uv-skeleton__wrapper"
|
||||
ref="uv-skeleton__wrapper"
|
||||
v-if="loading"
|
||||
style="display: flex; flex-direction: row;"
|
||||
>
|
||||
<view
|
||||
class="uv-skeleton__wrapper__avatar"
|
||||
v-if="avatar"
|
||||
:class="[`uv-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
|
||||
:style="{
|
||||
height: $uv.addUnit(avatarSize),
|
||||
width: $uv.addUnit(avatarSize)
|
||||
}"
|
||||
></view>
|
||||
<view
|
||||
class="uv-skeleton__wrapper__content"
|
||||
ref="uv-skeleton__wrapper__content"
|
||||
style="flex: 1;"
|
||||
>
|
||||
<view
|
||||
class="uv-skeleton__wrapper__content__title"
|
||||
v-if="title"
|
||||
:style="{
|
||||
width: uTitleWidth,
|
||||
height: $uv.addUnit(titleHeight),
|
||||
}"
|
||||
:class="[animate && 'animate']"
|
||||
></view>
|
||||
<view
|
||||
class="uv-skeleton__wrapper__content__rows"
|
||||
:class="[animate && 'animate']"
|
||||
v-for="(item, index) in rowsArray"
|
||||
:key="index"
|
||||
:style="{
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
marginTop: item.marginTop,
|
||||
marginLeft: item.marginLeft
|
||||
}"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<slot v-else />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
// #ifdef APP-NVUE
|
||||
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
const animation = uni.requireNativePlugin('animation')
|
||||
// #endif
|
||||
/**
|
||||
* Skeleton 骨架屏
|
||||
* @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
|
||||
* @tutorial https://www.uvui.cn/components/skeleton.html
|
||||
* @property {Boolean} loading 是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true )
|
||||
* @property {Boolean} animate 是否开启动画效果 (默认 true )
|
||||
* @property {String | Number} rows 段落占位图行数 (默认 0 )
|
||||
* @property {String | Number | Array} rowsWidth 段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 (默认 '100%' )
|
||||
* @property {String | Number | Array} rowsHeight 段落的高度 (默认 18 )
|
||||
* @property {String | Number | Array} rowsLeft 段落的左边距 (默认 0 )
|
||||
* @property {Boolean} title 是否展示标题占位图 (默认 true )
|
||||
* @property {String | Number} titleWidth 标题的宽度 (默认 '50%' )
|
||||
* @property {String | Number} titleHeight 标题的高度 (默认 18 )
|
||||
* @property {Boolean} avatar 是否展示头像占位图 (默认 false )
|
||||
* @property {String | Number} avatarSize 头像占位图大小 (默认 32 )
|
||||
* @property {String} avatarShape 头像占位图的形状，circle-圆形，square-方形 (默认 'circle' )
|
||||
* @example <uv-skeleton :loading="true" :animate="true"></uv-skeleton>
|
||||
*/
|
||||
export default {
|
||||
name: 'uv-skeleton',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
width: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
loading() {
|
||||
this.getComponentWidth()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rowsArray() {
|
||||
if (/%$/.test(this.rowsHeight)) {
|
||||
this.$uv.error('rowsHeight参数不支持百分比单位')
|
||||
}
|
||||
const rows = []
|
||||
for (let i = 0; i < this.rows; i++) {
|
||||
let item = {},
|
||||
// 需要预防超出数组边界的情况
|
||||
rowWidth = this.$uv.test.array(this.rowsWidth) ? (this.rowsWidth[i] || (i === this.row - 1 ? '70%' : '100%')) : i ===
|
||||
this.rows - 1 ? '70%' : this.rowsWidth,
|
||||
rowHeight = this.$uv.test.array(this.rowsHeight) ? (this.rowsHeight[i] || '18px') : this.rowsHeight,
|
||||
rowLeft = this.$uv.test.array(this.rowsLeft) ? (this.rowsLeft[i] || 0) : this.rowsLeft;
|
||||
// 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距
|
||||
// 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类
|
||||
item.marginTop = !this.title && i === 0 ? 0 : this.title && i === 0 ? '20px' : '12px'
|
||||
// 如果设置的为百分比的宽度，转换为px值，因为nvue不支持百分比单位
|
||||
if (/%$/.test(rowWidth)) {
|
||||
// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
|
||||
item.width = this.$uv.addUnit(this.width * parseInt(rowWidth) / 100)
|
||||
} else {
|
||||
item.width = this.$uv.addUnit(rowWidth)
|
||||
}
|
||||
item.height = this.$uv.addUnit(rowHeight)
|
||||
item.marginLeft = this.$uv.addUnit(rowLeft)
|
||||
rows.push(item)
|
||||
}
|
||||
// console.log(rows);
|
||||
return rows
|
||||
},
|
||||
uTitleWidth() {
|
||||
let tWidth = 0
|
||||
if (/%$/.test(this.titleWidth)) {
|
||||
// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
|
||||
tWidth = this.$uv.addUnit(this.width * parseInt(this.titleWidth) / 100)
|
||||
} else {
|
||||
tWidth = this.$uv.addUnit(this.titleWidth)
|
||||
}
|
||||
return this.$uv.addUnit(tWidth)
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getComponentWidth()
|
||||
// #ifdef APP-NVUE
|
||||
this.loading && this.animate && this.setNvueAnimation()
|
||||
// #endif
|
||||
},
|
||||
async setNvueAnimation() {
|
||||
// #ifdef APP-NVUE
|
||||
// 为了让opacity:1的状态保持一定时间，这里做一个延时
|
||||
await this.$uv.sleep(500)
|
||||
const skeleton = this.$refs['uv-skeleton__wrapper'];
|
||||
skeleton && this.loading && this.animate && animation.transition(skeleton, {
|
||||
styles: {
|
||||
opacity: 0.5
|
||||
},
|
||||
duration: 600,
|
||||
}, () => {
|
||||
// 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能
|
||||
// 会停留在opacity: 0.5的状态中
|
||||
animation.transition(skeleton, {
|
||||
styles: {
|
||||
opacity: 1
|
||||
},
|
||||
duration: 600,
|
||||
}, () => {
|
||||
// 只有在loading中时，才执行动画
|
||||
this.loading && this.animate && this.setNvueAnimation()
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 获取组件的宽度
|
||||
async getComponentWidth() {
|
||||
// 延时一定时间，以获取dom尺寸
|
||||
await this.$uv.sleep(20)
|
||||
// #ifndef APP-NVUE
|
||||
this.$uvGetRect('.uv-skeleton__wrapper__content').then(size => {
|
||||
this.width = size.width
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
const ref = this.$refs['uv-skeleton__wrapper__content']
|
||||
ref && dom.getComponentRect(ref, (res) => {
|
||||
this.width = res.size.width
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
|
||||
@mixin background {
|
||||
/* #ifdef APP-NVUE */
|
||||
background-color: #F1F2F4;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
|
||||
background-size: 400% 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uv-skeleton {
|
||||
flex: 1;
|
||||
|
||||
&__wrapper {
|
||||
@include flex(row);
|
||||
|
||||
&__avatar {
|
||||
@include background;
|
||||
margin-right: 15px;
|
||||
|
||||
&--circle {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
&--square {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
|
||||
&__rows,
|
||||
&__title {
|
||||
@include background;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.animate {
|
||||
animation: skeleton 1.8s ease infinite
|
||||
}
|
||||
|
||||
@keyframes skeleton {
|
||||
0% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uv-skeleton",
|
||||
"displayName": "uv-skeleton 骨架屏 全面兼容小程序、nvue、vue2、vue3等多端",
|
||||
"version": "1.0.2",
|
||||
"description": "骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。",
|
||||
"keywords": [
|
||||
"uv-skeleton",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"skeleton",
|
||||
"骨架屏"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"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",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
## Skeleton 骨架屏
|
||||
|
||||
> **组件名：uv-skeleton**
|
||||
|
||||
骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
|
||||
|
||||
### <a href="https://www.uvui.cn/components/skeleton.html" target="_blank">查看文档</a>
|
||||
|
||||
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
Reference in New Issue
Block a user