@eria7/ui-test-package 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +88 -0
- package/src/components/CustomNavbar.vue +67 -0
- package/src/components/Swiper.vue +71 -0
- package/src/components/index.ts +15 -0
package/package.json
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@eria7/ui-test-package",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"main": "src/components/index.ts",
|
|
6
|
+
"types": "src/components/index.ts",
|
|
7
|
+
"module": "src/components/index.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"src/components"
|
|
10
|
+
],
|
|
11
|
+
"scripts": {
|
|
12
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
13
|
+
"dev:custom": "uni -p",
|
|
14
|
+
"dev:h5": "uni",
|
|
15
|
+
"dev:h5:ssr": "uni --ssr",
|
|
16
|
+
"dev:mp-alipay": "uni -p mp-alipay",
|
|
17
|
+
"dev:mp-baidu": "uni -p mp-baidu",
|
|
18
|
+
"dev:mp-jd": "uni -p mp-jd",
|
|
19
|
+
"dev:mp-kuaishou": "uni -p mp-kuaishou",
|
|
20
|
+
"dev:mp-lark": "uni -p mp-lark",
|
|
21
|
+
"dev:mp-qq": "uni -p mp-qq",
|
|
22
|
+
"dev:mp-toutiao": "uni -p mp-toutiao",
|
|
23
|
+
"dev:mp-harmony": "uni -p mp-harmony",
|
|
24
|
+
"dev:mp-weixin": "uni -p mp-weixin",
|
|
25
|
+
"dev:mp-xhs": "uni -p mp-xhs",
|
|
26
|
+
"dev:quickapp-webview": "uni -p quickapp-webview",
|
|
27
|
+
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
|
|
28
|
+
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
|
|
29
|
+
"build:custom": "uni build -p",
|
|
30
|
+
"build:h5": "uni build",
|
|
31
|
+
"build:h5:ssr": "uni build --ssr",
|
|
32
|
+
"build:mp-alipay": "uni build -p mp-alipay",
|
|
33
|
+
"build:mp-baidu": "uni build -p mp-baidu",
|
|
34
|
+
"build:mp-jd": "uni build -p mp-jd",
|
|
35
|
+
"build:mp-kuaishou": "uni build -p mp-kuaishou",
|
|
36
|
+
"build:mp-lark": "uni build -p mp-lark",
|
|
37
|
+
"build:mp-qq": "uni build -p mp-qq",
|
|
38
|
+
"build:mp-toutiao": "uni build -p mp-toutiao",
|
|
39
|
+
"build:mp-harmony": "uni build -p mp-harmony",
|
|
40
|
+
"build:mp-weixin": "uni build -p mp-weixin",
|
|
41
|
+
"build:mp-xhs": "uni build -p mp-xhs",
|
|
42
|
+
"build:quickapp-webview": "uni build -p quickapp-webview",
|
|
43
|
+
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
|
|
44
|
+
"build:quickapp-webview-union": "uni build -p quickapp-webview-union"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@dcloudio/uni-app": "3.0.0-4080720251210001",
|
|
48
|
+
"@dcloudio/uni-app-harmony": "3.0.0-4080720251210001",
|
|
49
|
+
"@dcloudio/uni-app-plus": "3.0.0-4080720251210001",
|
|
50
|
+
"@dcloudio/uni-components": "3.0.0-4080720251210001",
|
|
51
|
+
"@dcloudio/uni-h5": "3.0.0-4080720251210001",
|
|
52
|
+
"@dcloudio/uni-mp-alipay": "3.0.0-4080720251210001",
|
|
53
|
+
"@dcloudio/uni-mp-baidu": "3.0.0-4080720251210001",
|
|
54
|
+
"@dcloudio/uni-mp-harmony": "3.0.0-4080720251210001",
|
|
55
|
+
"@dcloudio/uni-mp-jd": "3.0.0-4080720251210001",
|
|
56
|
+
"@dcloudio/uni-mp-kuaishou": "3.0.0-4080720251210001",
|
|
57
|
+
"@dcloudio/uni-mp-lark": "3.0.0-4080720251210001",
|
|
58
|
+
"@dcloudio/uni-mp-qq": "3.0.0-4080720251210001",
|
|
59
|
+
"@dcloudio/uni-mp-toutiao": "3.0.0-4080720251210001",
|
|
60
|
+
"@dcloudio/uni-mp-weixin": "3.0.0-4080720251210001",
|
|
61
|
+
"@dcloudio/uni-mp-xhs": "3.0.0-4080720251210001",
|
|
62
|
+
"@dcloudio/uni-quickapp-webview": "3.0.0-4080720251210001",
|
|
63
|
+
"vue": "^3.4.21",
|
|
64
|
+
"vue-i18n": "^9.1.9"
|
|
65
|
+
},
|
|
66
|
+
"devDependencies": {
|
|
67
|
+
"@dcloudio/types": "^3.4.8",
|
|
68
|
+
"@dcloudio/uni-automator": "3.0.0-4080720251210001",
|
|
69
|
+
"@dcloudio/uni-cli-shared": "3.0.0-4080720251210001",
|
|
70
|
+
"@dcloudio/uni-stacktracey": "3.0.0-4080720251210001",
|
|
71
|
+
"@dcloudio/vite-plugin-uni": "3.0.0-4080720251210001",
|
|
72
|
+
"@uni-helper/uni-app-types": "^1.0.0-alpha.7",
|
|
73
|
+
"@uni-helper/uni-ui-types": "^1.0.0-alpha.7",
|
|
74
|
+
"@vitejs/plugin-vue": "^6.0.5",
|
|
75
|
+
"@vue/runtime-core": "^3.4.21",
|
|
76
|
+
"@vue/tsconfig": "^0.1.3",
|
|
77
|
+
"sass": "^1.98.0",
|
|
78
|
+
"typescript": "^5.5.4",
|
|
79
|
+
"vite": "5.2.8",
|
|
80
|
+
"vue-tsc": "^3.2.6"
|
|
81
|
+
},
|
|
82
|
+
"keywords": [
|
|
83
|
+
"uniapp",
|
|
84
|
+
"components"
|
|
85
|
+
],
|
|
86
|
+
"author": "yxq",
|
|
87
|
+
"license": "ISC"
|
|
88
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
|
|
3
|
+
<view class="logo">
|
|
4
|
+
<text class="logo-text">新鲜 · 亲民 · 快捷</text>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="search">
|
|
7
|
+
<text class="icon-search">搜索商品</text>
|
|
8
|
+
<text class="icon-scan"></text>
|
|
9
|
+
</view>
|
|
10
|
+
</view>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<script setup lang="ts">
|
|
15
|
+
/**
|
|
16
|
+
* 自定义导航栏组件
|
|
17
|
+
* @description 自定义导航栏组件
|
|
18
|
+
* @example
|
|
19
|
+
* <CustomNavbar></CustomNavbar>
|
|
20
|
+
*/
|
|
21
|
+
// 获取屏幕边界到安全区域距离
|
|
22
|
+
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
<style lang="scss">
|
|
27
|
+
/* 自定义导航条 */
|
|
28
|
+
.navbar {
|
|
29
|
+
background-color: #1989fa;
|
|
30
|
+
position: relative;
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
padding-top: 20px;
|
|
34
|
+
.logo {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
height: 64rpx;
|
|
38
|
+
padding-left: 30rpx;
|
|
39
|
+
.logo-text {
|
|
40
|
+
line-height: 28rpx;
|
|
41
|
+
color: #fff;
|
|
42
|
+
font-size: 26rpx;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
.search {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
padding: 0 10rpx 0 26rpx;
|
|
50
|
+
height: 64rpx;
|
|
51
|
+
margin: 16rpx 20rpx;
|
|
52
|
+
color: #fff;
|
|
53
|
+
font-size: 28rpx;
|
|
54
|
+
border-radius: 32rpx;
|
|
55
|
+
background-color: rgba(255, 255, 255, 0.5);
|
|
56
|
+
}
|
|
57
|
+
.icon-search {
|
|
58
|
+
&::before {
|
|
59
|
+
margin-right: 10rpx;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
.icon-scan {
|
|
63
|
+
font-size: 30rpx;
|
|
64
|
+
padding: 15rpx;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="carousel">
|
|
3
|
+
<swiper class="swiper" :circular="true" :autoplay="false" @change="onChange">
|
|
4
|
+
<swiper-item v-for="(item,index) in props.list" :key="index">
|
|
5
|
+
<view class="navigator">
|
|
6
|
+
<image mode="aspectFill" class="image" :src="item"></image>
|
|
7
|
+
</view>
|
|
8
|
+
</swiper-item>
|
|
9
|
+
</swiper>
|
|
10
|
+
<view class="indicator">
|
|
11
|
+
<view class="dot" v-for="(item,index) in props.list" :key="index" :class="{active: index == activeIndex}">
|
|
12
|
+
</view>
|
|
13
|
+
</view>
|
|
14
|
+
</view>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup lang="ts">
|
|
18
|
+
/**
|
|
19
|
+
* 自定义轮播图组件
|
|
20
|
+
* @description 自定义轮播图组件
|
|
21
|
+
* @example
|
|
22
|
+
* <Swiper :list="list"></Swiper>
|
|
23
|
+
*/
|
|
24
|
+
import { ref } from 'vue'
|
|
25
|
+
const props = defineProps<{
|
|
26
|
+
/**
|
|
27
|
+
* 轮播图图片列表
|
|
28
|
+
* @type {string[]}
|
|
29
|
+
*/
|
|
30
|
+
list: string[]
|
|
31
|
+
}>()
|
|
32
|
+
|
|
33
|
+
const activeIndex = ref(0)
|
|
34
|
+
const onChange:UniHelper.SwiperOnChange = (e) => {
|
|
35
|
+
activeIndex.value = e.detail.current
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<style lang="scss">
|
|
41
|
+
.carousel {
|
|
42
|
+
height: 300rpx;
|
|
43
|
+
position: relative;
|
|
44
|
+
background-color: #efefef;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
.indicator {
|
|
47
|
+
position: absolute;
|
|
48
|
+
left: 0;
|
|
49
|
+
right: 0;
|
|
50
|
+
bottom: 16rpx;
|
|
51
|
+
display: flex;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
.dot {
|
|
54
|
+
margin: 0 8rpx;
|
|
55
|
+
height: 6rpx;
|
|
56
|
+
width: 30rpx;
|
|
57
|
+
border-radius: 6rpx;
|
|
58
|
+
background-color: rgba(255, 255, 255, 0.4);
|
|
59
|
+
}
|
|
60
|
+
.active {
|
|
61
|
+
background-color: #fff;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
.swiper,
|
|
65
|
+
.navigator,
|
|
66
|
+
.image {
|
|
67
|
+
width: 100%;
|
|
68
|
+
height: 100%;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
</style>
|