From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue | 224 --------------------------------------------------------
1 files changed, 0 insertions(+), 224 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue b/minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue
index 4fe885a..e69de29 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue
@@ -1,224 +0,0 @@
-<template>
- <view
- class="u-scroll-list"
- ref="u-scroll-list"
- >
- <!-- #ifdef APP-NVUE -->
- <!-- nvue浣跨敤bindingX瀹炵幇锛屼互寰楀埌鏇村ソ鐨勬�ц兘 -->
- <scroller
- class="u-scroll-list__scroll-view"
- ref="u-scroll-list__scroll-view"
- scroll-direction="horizontal"
- :show-scrollbar="false"
- :offset-accuracy="1"
- @scroll="nvueScrollHandler"
- >
- <view class="u-scroll-list__scroll-view__content">
- <slot />
- </view>
- </scroller>
- <!-- #endif -->
- <!-- #ifndef APP-NVUE -->
- <!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
- <!-- 浠ヤ笂骞冲彴锛屾敮鎸亀xs -->
- <scroll-view
- class="u-scroll-list__scroll-view"
- scroll-x
- @scroll="wxs.scroll"
- @scrolltoupper="wxs.scrolltoupper"
- @scrolltolower="wxs.scrolltolower"
- :data-scrollWidth="scrollWidth"
- :data-barWidth="$u.getPx(indicatorBarWidth)"
- :data-indicatorWidth="$u.getPx(indicatorWidth)"
- :show-scrollbar="false"
- :upper-threshold="0"
- :lower-threshold="0"
- >
- <!-- #endif -->
- <!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
- <!-- 闈炰互涓婂钩鍙帮紝鍙兘浣跨敤鏅�歫s瀹炵幇 -->
- <scroll-view
- class="u-scroll-list__scroll-view"
- scroll-x
- @scroll="scrollHandler"
- @scrolltoupper="scrolltoupperHandler"
- @scrolltolower="scrolltolowerHandler"
- :show-scrollbar="false"
- :upper-threshold="0"
- :lower-threshold="0"
- >
- <!-- #endif -->
- <view class="u-scroll-list__scroll-view__content">
- <slot />
- </view>
- </scroll-view>
- <!-- #endif -->
- <view
- class="u-scroll-list__indicator"
- v-if="indicator"
- :style="[$u.addStyle(indicatorStyle)]"
- >
- <view
- class="u-scroll-list__indicator__line"
- :style="[lineStyle]"
- >
- <view
- class="u-scroll-list__indicator__line__bar"
- :style="[barStyle]"
- ref="u-scroll-list__indicator__line__bar"
- ></view>
- </view>
- </view>
- </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锛宭eft锛宺ight杩涜瀹氫綅
- * @event {Function} left 婊戝姩鍒板乏杈规椂瑙﹀彂
- * @event {Function} right 婊戝姩鍒板彸杈规椂瑙﹀彂
- * @example
- */
-// #ifdef APP-NVUE
-const dom = uni.requireNativePlugin('dom')
-import nvueMixin from "./nvue.js"
-// #endif
-import props from './props.js';
-export default {
- name: 'u-scroll-list',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- // #ifdef APP-NVUE
- mixins: [uni.$u.mpMixin, uni.$u.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
- // 姝や负鏅�歫s鏂规锛屽彧鏈夊湪闈瀗vue鍜屼笉鏀寔wxs鏂规鐨勭鎵嶄娇鐢ㄣ��
- // 姝ゅ鐨勮绠楃悊鐢变负锛歴croll-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 = uni.$u.addUnit(this.indicatorBarWidth)
- style.backgroundColor = this.indicatorActiveColor
- return style
- },
- lineStyle() {
- const style = {}
- // 鎸囩ず鍣ㄦ暣浣撶殑鏍峰紡锛岄渶瑕佽缃叾瀹藉害鍜岃儗鏅壊
- style.width = uni.$u.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')
- // 鍦ㄦ櫘閫歫s鏂规涓紝婊氬姩鍒板彸杈规椂锛岄�氳繃璁剧疆this.scrollInfo锛屾ā鎷熷嚭婊氬姩鍒板彸杈圭殑鎯呭喌
- // 鍥犱负涓婃柟鏄敤杩嘽omputed璁＄畻鐨勶紝璁剧疆鍚庯紝浼氳嚜鍔ㄨ皟鏁存粦鍧楃殑浣嶇疆
- this.scrollInfo.scrollLeft = uni.$u.getPx(this.indicatorWidth) - uni.$u.getPx(this.indicatorBarWidth)
- },
- // #endif
- //
- scrollEvent(status) {
- this.$emit(status)
- },
- // 鑾峰彇缁勪欢鐨勫搴�
- async getComponentWidth() {
- // 寤舵椂涓�瀹氭椂闂达紝浠ヨ幏鍙杁om灏哄
- await uni.$u.sleep(30)
- // #ifndef APP-NVUE
- this.$uGetRect('.u-scroll-list').then(size => {
- this.scrollWidth = size.width
- })
- // #endif
-
- // #ifdef APP-NVUE
- const ref = this.$refs['u-scroll-list']
- ref && dom.getComponentRect(ref, (res) => {
- this.scrollWidth = res.size.width
- })
- // #endif
- },
- }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../libs/css/components.scss";
-
-.u-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>
--
Gitblit v1.9.3