Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 69e48a7c 作者: 方治民
操作

test: 测试虚拟滚动 indexlist 组件示例

上级 1d1258bb
正在显示 包含 608 行增加 和 160 行删除
.eslintignore
......@@ -22,3 +22,5 @@ src/api/services/api.d.ts
src/static/**
src/components/firstui/**
src/uni_modules/**
*.nvue
.stylelintignore
......@@ -5,3 +5,5 @@ example/*
src/static/**
src/components/firstui/**
src/uni_modules/**
src/**/*.nvue
package.json
......@@ -80,12 +80,12 @@
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3070720230316001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3070720230316001",
"@dcloudio/uni-ui": "^1.4.26",
"@faker-js/faker": "^7.6.0",
"@vue/runtime-core": "^3.2.47",
"@vueuse/core": "^9.13.0",
"axios": "^0.26.1",
"dayjs": "^1.11.7",
"lodash-es": "^4.17.21",
"mockjs": "^1.1.0",
"nanoid": "^4.0.1",
"pinia": "^2.0.33",
"pinyin-pro": "^3.13.1",
......
pnpm-lock.yaml
......@@ -24,6 +24,7 @@ specifiers:
'@dcloudio/uni-stacktracey': 3.0.0-alpha-3070720230316001
'@dcloudio/uni-ui': ^1.4.26
'@dcloudio/vite-plugin-uni': 3.0.0-alpha-3070720230316001
'@faker-js/faker': ^7.6.0
'@iconify/json': ^2.2.36
'@types/lodash-es': ^4.17.7
'@types/mapbox-gl': ^2.7.10
......@@ -57,7 +58,6 @@ specifiers:
lint-staged: ^13.2.0
lodash-es: ^4.17.21
mapbox-gl: ^2.13.0
mockjs: ^1.1.0
nanoid: ^4.0.1
npm-run-all: ^4.1.5
picocolors: ^1.0.0
......@@ -110,12 +110,12 @@ dependencies:
'@dcloudio/uni-mp-weixin': 3.0.0-alpha-3070720230316001_postcss@8.4.21+vue@3.2.47
'@dcloudio/uni-quickapp-webview': 3.0.0-alpha-3070720230316001_postcss@8.4.21+vue@3.2.47
'@dcloudio/uni-ui': 1.4.26
'@faker-js/faker': 7.6.0
'@vue/runtime-core': 3.2.47
'@vueuse/core': 9.13.0_vue@3.2.47
axios: 0.26.1
dayjs: 1.11.7
lodash-es: 4.17.21
mockjs: 1.1.0
nanoid: 4.0.1
pinia: 2.0.33_hmuptsblhheur2tugfgucj7gc4
pinyin-pro: 3.13.1
......@@ -2582,6 +2582,11 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/@faker-js/faker/7.6.0:
resolution: {integrity: sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==}
engines: {node: '>=14.0.0', npm: '>=6.0.0'}
dev: false
/@humanwhocodes/config-array/0.11.8:
resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
engines: {node: '>=10.10.0'}
......@@ -4920,6 +4925,7 @@ packages:
/commander/10.0.0:
resolution: {integrity: sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==}
engines: {node: '>=14'}
dev: true
/commander/2.20.3:
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
......@@ -8797,13 +8803,6 @@ packages:
ufo: 1.1.1
dev: true
/mockjs/1.1.0:
resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
hasBin: true
dependencies:
commander: 10.0.0
dev: false
/modify-values/1.0.1:
resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
engines: {node: '>=0.10.0'}
......
src/App.vue
......@@ -45,9 +45,4 @@
// 全局样式
@import './common/public.less';
uni-page-body,
page {
height: 100%;
}
</style>
src/common/public.less
......@@ -4,132 +4,3 @@
align-items: center;
height: 100vh;
}
// ================ mapbox-gl ================
// 自定义 popup 内容样式
.mapboxgl-popup-content {
box-shadow: 0 1px 5px #6e6e6e !important;
}
.mapboxgl-popup-content .mapboxgl-custom-popup {
position: relative;
}
.mapboxgl-custom-popup .popup-title {
font-weight: bold;
}
.mapboxgl-ctrl-group:not(:empty) {
box-shadow: 0 0 6px #000 !important;
}
.mapboxgl-ctrl-group button {
display: flex !important;
overflow: visible !important;
}
.mapboxgl-ctrl-logo {
display: none !important;
}
.mapboxgl-ctrl-bottom-left {
display: flex;
bottom: 0;
left: 2px;
}
.mapboxgl-ctrl-lnglat {
background: rgb(0 0 0 / 40%);
color: white;
line-height: 2em;
padding: 0 10px;
}
// 覆盖全屏控件的图标
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M3.75 3a.75.75 0 0 0-.75.75V5.5a.5.5 0 0 1-1 0V3.75C2 2.784 2.784 2 3.75 2H5.5a.5.5 0 0 1 0 1H3.75ZM10 2.5a.5.5 0 0 1 .5-.5h1.75c.966 0 1.75.784 1.75 1.75V5.5a.5.5 0 0 1-1 0V3.75a.75.75 0 0 0-.75-.75H10.5a.5.5 0 0 1-.5-.5ZM2.5 10a.5.5 0 0 1 .5.5v1.75c0 .414.336.75.75.75H5.5a.5.5 0 0 1 0 1H3.75A1.75 1.75 0 0 1 2 12.25V10.5a.5.5 0 0 1 .5-.5Zm11 0a.5.5 0 0 1 .5.5v1.75A1.75 1.75 0 0 1 12.25 14H10.5a.5.5 0 0 1 0-1h1.75a.75.75 0 0 0 .75-.75V10.5a.5.5 0 0 1 .5-.5Z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M11 4a1 1 0 0 0 1 1h1.5a.5.5 0 0 1 0 1H12a2 2 0 0 1-2-2V2.5a.5.5 0 0 1 1 0V4Zm0 8a1 1 0 0 1 1-1h1.5a.5.5 0 0 0 0-1H12a2 2 0 0 0-2 2v1.5a.5.5 0 0 0 1 0V12Zm-7-1a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 1 0V12a2 2 0 0 0-2-2H2.5a.5.5 0 0 0 0 1H4Zm1-7a1 1 0 0 1-1 1H2.5a.5.5 0 0 0 0 1H4a2 2 0 0 0 2-2V2.5a.5.5 0 0 0-1 0V4Z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl .mapboxgl-ctrl-reset-button .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3s-3 1.331-3 3s1.329 3 3 3z"%2F%3E%3Cpath fill="currentColor" d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219a9.053 9.053 0 0 0-2.43-2.43a8.95 8.95 0 0 0-3.219-1.355a9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053a7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725a7.11 7.11 0 0 1-.644 1.188a7.2 7.2 0 0 1-.858 1.039a7.028 7.028 0 0 1-3.536 1.907a7.13 7.13 0 0 1-2.822 0a6.961 6.961 0 0 1-2.503-1.054a7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034a9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183a9.014 9.014 0 0 0 3.218-1.355a8.886 8.886 0 0 0 1.331-1.099a9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl .mapboxgl-ctrl-layer-button .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="m13.387 3.425l6.365 4.243a1 1 0 0 1 0 1.664l-6.365 4.244a2.5 2.5 0 0 1-2.774 0L4.248 9.332a1 1 0 0 1 0-1.664l6.365-4.243a2.5 2.5 0 0 1 2.774 0Zm6.639 8.767a2.002 2.002 0 0 1-.577.598l-6.05 4.084a2.5 2.5 0 0 1-2.798 0l-6.05-4.084a2 2 0 0 1-.779-2.29l6.841 4.56a2.5 2.5 0 0 0 2.613.098l.16-.098l6.841-4.56a1.996 1.996 0 0 1-.201 1.692Zm0 3.25a2.002 2.002 0 0 1-.577.598l-6.05 4.084a2.5 2.5 0 0 1-2.798 0l-6.05-4.084a2 2 0 0 1-.779-2.29l6.841 4.56a2.5 2.5 0 0 0 2.613.098l.16-.098l6.841-4.56a1.996 1.996 0 0 1-.201 1.692Z"%2F%3E%3C%2Fsvg%3E') !important;
}
/* stylelint-disable-next-line selector-no-vendor-prefix */
.mapboxgl-map:-webkit-full-screen {
.mapboxgl-ctrl-bottom-left {
bottom: 0;
}
}
// 自定义图层控制器样式
.mapboxgl-ctrl button.-active svg {
color: #4264fb;
}
.mapboxgl-ctrl-layer-button {
// position: relative;
z-index: 1;
}
.mapboxgl-ctrl-layer-wrap {
z-index: 100;
display: flex;
justify-items: center;
align-items: center;
position: absolute;
top: 0;
left: -220px;
visibility: hidden;
padding: 10px;
border-radius: 3px;
box-shadow: 0 0 3px #333;
background-color: #fff;
}
.mapboxgl-ctrl-layer {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
border: 2px solid #fff;
position: relative;
}
.mapboxgl-ctrl-layer.active {
border-color: #3385ff;
}
.mapboxgl-ctrl-layer img {
width: 100%;
height: 100%;
}
.mapboxgl-ctrl-layer span {
display: inline-flex;
justify-content: center;
background-color: rgb(0 0 0 / 60%);
color: white;
position: absolute;
bottom: 0;
width: 100%;
}
.mapboxgl-ctrl-layer-button.-active .mapboxgl-ctrl-layer-wrap {
visibility: visible;
}
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
padding-bottom: 0;
/* stylelint-disable-next-line function-no-unknown */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
src/components/Map/Mapbox/index.ts
......@@ -435,12 +435,12 @@ export function loadMapControl(mapboxgl: any, map: mapboxgl.Map, options?: MapCo
label: '影像',
value: 'img,cia',
image: `${host}/api/assets/images/img_w.png`,
active: true,
},
{
label: '矢量',
value: 'vec,cva',
image: `${host}/api/assets/images/vec_w.png`,
active: true,
},
{
label: '地形',
......
src/components/firstui/fui-index-list/f-index-list-item.vue
......@@ -35,7 +35,6 @@
isSelect: {
type: Boolean,
default: false
},
selectedColor: {
type: String,
......
src/components/firstui/fui-virtual-index-list/f-virtual-index-list-item.vue 0 → 100644
<template>
<view class="fui-index__list-item" :class="{'fui-il__between':subRight}" @tap="onClick">
<view class="fui-index__list-left">
<view class="fui-il__checkbox"
:class="{'fui-il__checkbox-color':(!selectedColor || selectedColor=='true') && model.checked}"
:style="{background:model.checked?selectedColor:'#fff',borderColor:model.checked?selectedColor:borderColor}"
v-if="isSelect">
<view class="fui-il__checkmark" v-if="model.checked"></view>
</view>
<view class="fui-il__img-box" v-if="isSrc">
<fLazyload v-if="model.src" :src="model.src" class="fui-index__list-img" width="72" height="72" mode="widthFix"></fLazyload>
</view>
<text class="fui-index__list-main">{{model.text || ''}}</text>
</view>
<text class="fui-index__list-sub">{{model.subText || ''}}</text>
<view class="fui-il__border-bottom" v-if="!last"></view>
</view>
</template>
<script>
import fLazyload from '../fui-lazyload/fui-lazyload.vue'
//此组件为索引列表item项，若不满足要求可自行调整样式
export default {
name: 'f-virtual-index-list-item',
components: {
fLazyload
},
props: {
model: {
type: Object,
default () {
return {}
}
},
isSelect: {
type: Boolean,
default: false
},
selectedColor: {
type: String,
// #ifdef APP-NVUE
default: '#465CFF'
// #endif
// #ifndef APP-NVUE
default: ''
// #endif
},
//checkbox未选中时边框颜色
borderColor: {
type: String,
default: '#ccc'
},
//是否显示图片
isSrc: {
type: Boolean,
default: false
},
//次要内容是否居右侧
subRight: {
type: Boolean,
default: true
},
last: {
type: Boolean,
default: false
},
idx: {
type: Number,
default: 0
},
index: {
type: Number,
default: 0
}
},
methods: {
onClick() {
this.$emit("itemClick", {
idx: this.idx,
index: this.index
})
}
}
};
</script>
<style scoped>
.fui-index__list-item {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
box-sizing: border-box;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
padding: 32rpx 64rpx 32rpx 32rpx;
background-color: #FFFFFF;
position: relative;
}
.fui-il__border-bottom {
position: absolute;
bottom: 0;
/* #ifdef APP-NVUE */
height: 0.5px;
z-index: -1;
background-color: #EEEEEE;
/* #endif */
/* #ifndef APP-NVUE */
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
transform-origin: 0 100%;
z-index: 1;
background-color: var(--fui-color-border, #EEEEEE);
/* #endif */
left: 32rpx;
right: 0;
}
.fui-index__list-item:active {
/* #ifdef APP-NVUE */
background-color: rgba(0, 0, 0, 0.2) !important;
/* #endif */
/* #ifndef APP-NVUE */
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important;
/* #endif */
}
.fui-il__between {
justify-content: space-between;
}
.fui-index__list-left {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
overflow: hidden;
}
.fui-il__checkbox {
font-size: 0;
color: rgba(0, 0, 0, 0);
width: 40rpx;
height: 40rpx;
border-width: 1px;
border-style: solid;
/* #ifdef APP-NVUE */
border-radius: 40rpx;
/* #endif */
/* #ifndef APP-NVUE */
display: inline-flex;
box-sizing: border-box;
border-radius: 50%;
vertical-align: top;
flex-shrink: 0;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
margin-right: 24rpx;
}
/* #ifndef APP-NVUE */
.fui-il__checkbox-color {
background: var(--fui-color-primary, #465CFF) !important;
border-color: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
.fui-il__checkmark {
width: 20rpx;
height: 40rpx;
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: #FFFFFF;
border-right-style: solid;
border-right-width: 3px;
border-right-color: #FFFFFF;
transform: rotate(45deg) scale(0.5);
/* #ifndef APP-NVUE */
box-sizing: border-box;
transform: rotate(45deg) scale(0.5) translateZ(0);
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(45deg) scale(0.5);
/* #endif */
transform-origin: 54% 48%;
}
.fui-il__img-box {
/* #ifndef APP-NVUE */
display: flex;
background-color: var(--fui-bg-color-content, #F8F8F8);
/* #endif */
width: 72rpx;
height: 72rpx;
align-items: center;
justify-content: center;
border-radius: 8rpx;
overflow: hidden;
/* #ifdef APP-NVUE */
background-color: #F8F8F8;
/* #endif */
margin-right: 24rpx;
}
.fui-index__list-img {
width: 72rpx;
height: 72rpx;
/* #ifndef APP-NVUE */
flex-shrink: 0;
/* #endif */
border-radius: 8rpx;
}
.fui-index__list-main {
/* #ifndef APP-NVUE */
display: block;
white-space: nowrap;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
font-size: 32rpx;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.fui-index__list-sub {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
font-weight: normal;
font-size: 28rpx;
color: #999;
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
padding-left: 24rpx;
}
</style>
src/pages.json
......@@ -21,6 +21,12 @@
"navigationBarTitleText": "LinkedList 大列表示例"
}
},
{
"path": "pages/example/linkedlist-nvue/index",
"style": {
"navigationBarTitleText": "LinkedList 大列表示例 - NVUE"
}
},
// === PDF 文件预览 ===
{
......
src/pages/example/linkedlist-nvue/data.js 0 → 100644
import { faker } from '@faker-js/faker/locale/zh_CN'
import { pinyin } from 'pinyin-pro'
export function getData() {
const data = Array(1000)
.fill(0)
.map((item) => {
const name = faker.name.fullName()
return {
id: item,
name,
phone: faker.phone.number('1###########'),
avatar: faker.image.avatar(),
unit: faker.company.name(),
checked: false,
}
})
const result = data
.map((item) => {
const props = {}
if (item.name) {
item.letter = pinyin(item.name.charAt(), { pattern: 'first' })[0].toUpperCase()
} else {
item.letter = '★'
}
return {
...item,
...props,
// TODO: 存在性能问题，需要优化后再使用
// src: item.avatar || '/static/images/me/user_default.jpg',
text: item.name,
subText: item.unit,
}
})
.reduce((prev, cur) => {
const letter = cur.letter
const index = prev.findIndex((item) => item.letter === letter)
if (index === -1) {
prev.push({
letter,
items: [cur],
})
} else {
prev[index].items.push(cur)
}
return prev
}, [])
.sort((a, b) => {
return a.letter.charCodeAt(0) - b.letter.charCodeAt(0)
})
return result
}
src/pages/example/linkedlist-nvue/swiper-page.nvue 0 → 100644
<template>
<view class="uni-swiper-page">
<list ref="list" class="list" :offset-accuracy="5" :bounce="false" fixFreezing="true">
<cell v-for="(item, index) in dataList" :key="item.id" :ref="'item' + index">
<view class="list-item">
<text>{{ item.name }}</text>
</view>
</cell>
<cell class="loading"></cell>
</list>
</view>
</template>
<script>
import { faker } from '@faker-js/faker/locale/zh_CN'
import { pinyin } from 'pinyin-pro'
import fuiIndexList from '../../../components/FirstUI/fui-index-list/fui-index-list.vue'
export default {
components: {
fuiIndexList,
},
props: {
pid: {
type: [Number, String],
default: '',
},
parentId: {
type: String,
default: '',
},
},
data() {
return {
scrollable: true,
dataList: [],
}
},
created() {
for (var i = 0; i < 5000; i++) {
this.dataList.push({
id: i,
// name: faker.name.lastName() + faker.name.firstName(),
name: i,
})
}
},
methods: {
getData() {
const data = Array(1000)
.fill(0)
.map((item) => {
return {
id: item,
name: faker.name.lastName() + faker.name.firstName(),
phone: faker.phone.number('1###########'),
avatar: faker.image.avatar(),
unit: faker.company.name(),
checked: false,
}
})
const result = data
.map((item) => {
const props = {}
if (item.name) {
item.letter = pinyin(item.name.charAt(), { pattern: 'first' })[0].toUpperCase()
} else {
item.letter = '★'
}
return {
...item,
...props,
// TODO: 存在性能问题，需要优化后再使用
src: item.avatar || '/static/images/me/user_default.jpg',
text: item.name,
subText: item.unit,
}
})
.reduce((prev, cur) => {
const letter = cur.letter
const index = prev.findIndex((item) => item.letter === letter)
if (index === -1) {
prev.push({
letter,
items: [cur],
})
} else {
prev[index].items.push(cur)
}
return prev
}, [])
.sort((a, b) => {
return a.letter.charCodeAt(0) - b.letter.charCodeAt(0)
})
return result
},
setScrollRef(height) {
if (this.$refs['list'].setSpecialEffects) {
this.$refs['list'].setSpecialEffects({
id: this.parentId,
headerHeight: height,
})
}
},
loadData() {
// 首次激活时被调用
},
clear() {
// 释放数据时被调用，参考 swiper-list 缓存配置
this.dataList.length = 0
},
},
}
</script>
<style scoped>
.uni-swiper-page {
flex: 1;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.list {
flex: 1;
background-color: #ebebeb;
}
.list-item {
margin-left: 12px;
margin-right: 12px;
margin-top: 12px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
}
.loading {
height: 20px;
}
</style>
src/pages/example/linkedlist/data.ts
import Mock from 'mockjs'
import { faker } from '@faker-js/faker/locale/zh_CN'
import { pinyin } from 'pinyin-pro'
export function getData() {
const data = Array(1000)
.fill(0)
.map(() => {
const name = Mock.Random.cname()
.map((item) => {
return {
id: Mock.Random.guid(),
name,
phone: String(Mock.Random.integer(13000000000, 19999999999)),
avatar: Mock.Random.image('50x50', Mock.Random.color(), '#757575', 'png', name.charAt(0)),
unit: Mock.Random.cword(3, 5),
id: item,
name: faker.name.lastName() + faker.name.firstName(),
phone: faker.phone.number('1###########'),
avatar: faker.image.avatar(),
unit: faker.company.name(),
checked: false,
}
})
......@@ -21,9 +19,9 @@ export function getData() {
.map((item: any) => {
const props = {}
if (item.name) {
item.letter = pinyin(item.name.charAt(), { pattern: 'first' })[0].toUpperCase()
item.letter = pinyin(item.name.charAt(), { toneType: 'none', pattern: 'first' })[0].toUpperCase()
} else {
item.letter = '★'
item.letter = '#'
}
return {
......
src/pages/example/linkedlist/index.vue
......@@ -93,7 +93,7 @@
<template>
<view class="wrap">
<!-- -->
<fui-index-list
<fui-virtual-index-list
isSrc
:listData="data.list"
:isSelect="model.params?.multiple"
......@@ -101,6 +101,7 @@
@init="model.show = true"
@click="choose"
:class="model.params?.multiple ? 'multiple' : ''"
:debug="true"
>
<fui-search-bar @input="search" @clear="model.search = ''" />
<template #footer>
......@@ -110,7 +111,7 @@
<!-- 安全区 -->
<fui-safe-area />
</template>
</fui-index-list>
</fui-virtual-index-list>
<!-- 多选确认按钮 -->
......
src/pages/example/mapbox/mapbox.module.js
......@@ -12,7 +12,11 @@ export default {
loadLibs() {
const id = 'mapbox-gl'
const resource = 'static/mapbox-gl-js/v2.13.0/mapbox-gl'
return Promise.all([appendScript(id, `${resource}.js`), appendStylesheet(id, `${resource}.css`)])
return Promise.all([
appendScript(id, `${resource}.js`),
appendStylesheet(id, `${resource}.css`),
appendStylesheet(id, `${resource}.extra.css`),
])
},
initMap(options) {
// 移除地图
......
src/pages/index/index.vue
......@@ -12,6 +12,13 @@
icon: 'emojione-letter-z',
page: `/pages/example/linkedlist/index?multiple=true`,
},
// #ifdef APP-PLUS
{
name: 'LinkedList 大列表示例 - NVUE',
icon: 'emojione-letter-z',
page: `/pages/example/linkedlist-nvue/index?multiple=true`,
},
// #endif
],
})
......
src/static/mapbox-gl-js/v2.13.0/mapbox-gl.extra.css 0 → 100644
.mapboxgl-popup-content {
box-shadow: 0 1px 5px #6e6e6e !important;
}
.mapboxgl-popup-content .mapboxgl-custom-popup {
position: relative;
}
.mapboxgl-custom-popup .popup-title {
font-weight: bold;
}
.mapboxgl-ctrl-logo {
display: none !important;
}
.mapboxgl-ctrl-bottom-left {
display: flex;
bottom: 0;
left: 2px;
}
.mapboxgl-ctrl-lnglat {
background: rgb(0 0 0 / 40%);
color: white;
line-height: 2em;
padding: 0 10px;
box-shadow: 0 0 0 2px rgba(0,0,0,.1);
border-radius: 4px;
}
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M3.75 3a.75.75 0 0 0-.75.75V5.5a.5.5 0 0 1-1 0V3.75C2 2.784 2.784 2 3.75 2H5.5a.5.5 0 0 1 0 1H3.75ZM10 2.5a.5.5 0 0 1 .5-.5h1.75c.966 0 1.75.784 1.75 1.75V5.5a.5.5 0 0 1-1 0V3.75a.75.75 0 0 0-.75-.75H10.5a.5.5 0 0 1-.5-.5ZM2.5 10a.5.5 0 0 1 .5.5v1.75c0 .414.336.75.75.75H5.5a.5.5 0 0 1 0 1H3.75A1.75 1.75 0 0 1 2 12.25V10.5a.5.5 0 0 1 .5-.5Zm11 0a.5.5 0 0 1 .5.5v1.75A1.75 1.75 0 0 1 12.25 14H10.5a.5.5 0 0 1 0-1h1.75a.75.75 0 0 0 .75-.75V10.5a.5.5 0 0 1 .5-.5Z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M11 4a1 1 0 0 0 1 1h1.5a.5.5 0 0 1 0 1H12a2 2 0 0 1-2-2V2.5a.5.5 0 0 1 1 0V4Zm0 8a1 1 0 0 1 1-1h1.5a.5.5 0 0 0 0-1H12a2 2 0 0 0-2 2v1.5a.5.5 0 0 0 1 0V12Zm-7-1a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 1 0V12a2 2 0 0 0-2-2H2.5a.5.5 0 0 0 0 1H4Zm1-7a1 1 0 0 1-1 1H2.5a.5.5 0 0 0 0 1H4a2 2 0 0 0 2-2V2.5a.5.5 0 0 0-1 0V4Z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl .mapboxgl-ctrl-reset-button .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3s-3 1.331-3 3s1.329 3 3 3z"%2F%3E%3Cpath fill="currentColor" d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219a9.053 9.053 0 0 0-2.43-2.43a8.95 8.95 0 0 0-3.219-1.355a9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053a7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725a7.11 7.11 0 0 1-.644 1.188a7.2 7.2 0 0 1-.858 1.039a7.028 7.028 0 0 1-3.536 1.907a7.13 7.13 0 0 1-2.822 0a6.961 6.961 0 0 1-2.503-1.054a7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034a9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183a9.014 9.014 0 0 0 3.218-1.355a8.886 8.886 0 0 0 1.331-1.099a9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl .mapboxgl-ctrl-layer-button .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="m13.387 3.425l6.365 4.243a1 1 0 0 1 0 1.664l-6.365 4.244a2.5 2.5 0 0 1-2.774 0L4.248 9.332a1 1 0 0 1 0-1.664l6.365-4.243a2.5 2.5 0 0 1 2.774 0Zm6.639 8.767a2.002 2.002 0 0 1-.577.598l-6.05 4.084a2.5 2.5 0 0 1-2.798 0l-6.05-4.084a2 2 0 0 1-.779-2.29l6.841 4.56a2.5 2.5 0 0 0 2.613.098l.16-.098l6.841-4.56a1.996 1.996 0 0 1-.201 1.692Zm0 3.25a2.002 2.002 0 0 1-.577.598l-6.05 4.084a2.5 2.5 0 0 1-2.798 0l-6.05-4.084a2 2 0 0 1-.779-2.29l6.841 4.56a2.5 2.5 0 0 0 2.613.098l.16-.098l6.841-4.56a1.996 1.996 0 0 1-.201 1.692Z"%2F%3E%3C%2Fsvg%3E') !important;
}
.mapboxgl-ctrl button.-active svg {
color: #4264fb;
}
.mapboxgl-ctrl-layer-button {
z-index: 1;
}
.mapboxgl-ctrl-layer-wrap {
z-index: 100;
display: flex;
justify-items: center;
align-items: center;
position: absolute;
top: 0;
left: -220px;
visibility: hidden;
padding: 10px;
border-radius: 3px;
box-shadow: 0 0 3px #333;
background-color: #fff;
}
.mapboxgl-ctrl-layer {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
border: 2px solid #fff;
position: relative;
}
.mapboxgl-ctrl-layer.active {
border-color: #3385ff;
}
.mapboxgl-ctrl-layer img {
width: 100%;
height: 100%;
}
.mapboxgl-ctrl-layer span {
display: inline-flex;
justify-content: center;
background-color: rgb(0 0 0 / 60%);
color: white;
position: absolute;
bottom: 0;
width: 100%;
}
.mapboxgl-ctrl-layer-button.-active .mapboxgl-ctrl-layer-wrap {
visibility: visible;
}
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
padding-bottom: 0;
/* stylelint-disable-next-line function-no-unknown */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
types/components.d.ts
......@@ -123,10 +123,12 @@ declare module '@vue/runtime-core' {
FuiTopPopup: typeof import('./../src/components/FirstUI/fui-top-popup/fui-top-popup.vue')['default']
FuiUpload: typeof import('./../src/components/FirstUI/fui-upload/fui-upload.vue')['default']
FuiUploadVideo: typeof import('./../src/components/FirstUI/fui-upload-video/fui-upload-video.vue')['default']
FuiVirtualIndexList: typeof import('./../src/components/FirstUI/fui-virtual-index-list/fui-virtual-index-list.vue')['default']
FuiVtabs: typeof import('./../src/components/FirstUI/fui-vtabs/fui-vtabs.vue')['default']
FuiVtabsContent: typeof import('./../src/components/FirstUI/fui-vtabs-content/fui-vtabs-content.vue')['default']
FuiWaterfall: typeof import('./../src/components/FirstUI/fui-waterfall/fui-waterfall.vue')['default']
FuiWaterfallItem: typeof import('./../src/components/FirstUI/fui-waterfall-item/fui-waterfall-item.vue')['default']
FVirtualIndexListItem: typeof import('./../src/components/FirstUI/fui-virtual-index-list/f-virtual-index-list-item.vue')['default']
Icon: typeof import('./../src/components/Icon/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论