v1.0
This commit is contained in:
hupeng
8
uni_modules/uv-scroll-list/changelog.md
Normal file
8
uni_modules/uv-scroll-list/changelog.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 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 横向滚动表组件
|
||||
29
uni_modules/uv-scroll-list/components/uv-scroll-list/nvue.js
Normal file
29
uni_modules/uv-scroll-list/components/uv-scroll-list/nvue.js
Normal file
@ -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} * ${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,50 @@
|
||||
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)
|
||||
}
|
||||
|
||||
// 由于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)
|
||||
}
|
||||
|
||||
function scrolltoupper(event, ownerInstance) {
|
||||
ownerInstance.callMethod('scrollEvent', 'left')
|
||||
// 滚动到左边时，将滑块设置为0的偏移距离，回到起点
|
||||
setBarStyle(ownerInstance, 0)
|
||||
}
|
||||
|
||||
function setBarStyle(ownerInstance, x) {
|
||||
ownerInstance.selectComponent('.uv-scroll-list__indicator__line__bar') && ownerInstance.selectComponent('.uv-scroll-list__indicator__line__bar').setStyle({
|
||||
transform: 'translateX(' + x + 'px)'
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
scroll: scroll,
|
||||
scrolltolower: scrolltolower,
|
||||
scrolltoupper: scrolltoupper
|
||||
}
|
||||
@ -0,0 +1,217 @@
|
||||
<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"
|
||||
>
|
||||
<!-- #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) * 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>
|
||||
87
uni_modules/uv-scroll-list/package.json
Normal file
87
uni_modules/uv-scroll-list/package.json
Normal file
@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uv-scroll-list",
|
||||
"displayName": "uv-scroll-list 横向滚动列表 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.3",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
uni_modules/uv-scroll-list/readme.md
Normal file
19
uni_modules/uv-scroll-list/readme.md
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user