buffeyu
4 years ago
21 changed files with 1300 additions and 60 deletions
Unified View
Diff Options
-
2App.vue
-
73components/qn-input-number/qn-input-number.vue
-
24components/u-gap/u-gap.vue
-
9pages.json
-
283pages/cart/index.vue
-
550pages/paper-details/index.vue
-
63pages/store/index.vue
-
BINstatic/imgs/paperDetails/add-shopping-trolley.png
-
BINstatic/imgs/paperDetails/shop-icon.png
-
BINstatic/imgs/paperDetails/shopping-trolley.png
-
BINstatic/imgs/store/special-offe.png
-
2uni_modules/uni-popup/changelog.md
-
2uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
-
2uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
-
2uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
-
18uni_modules/uni-popup/components/uni-popup/uni-popup.vue
-
2uni_modules/uni-popup/package.json
-
12uni_modules/uni-swiper-dot/changelog.md
-
218uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
-
87uni_modules/uni-swiper-dot/package.json
-
11uni_modules/uni-swiper-dot/readme.md
@ -0,0 +1,73 @@ |
|||||
|
<template> |
||||
|
<view class="warpper"> |
||||
|
<view class="minus-box" @tap="minusTap"> |
||||
|
－ |
||||
|
</view> |
||||
|
<view class="" style="padding: 0rpx 4rpx;"> |
||||
|
<uni-easyinput |
||||
|
:inputBorder="false" |
||||
|
class="quantity-input" |
||||
|
type="number" |
||||
|
:value="value" |
||||
|
placeholder="请输入" |
||||
|
@blur="blur" |
||||
|
@confirm="confirm" |
||||
|
></uni-easyinput> |
||||
|
</view> |
||||
|
<view class="minus-box" @tap="addTap"> |
||||
|
<uni-icons size="16" type="plusempty" color="#007AFF"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
value: 0, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
blur(e) { |
||||
|
this.$emit('change', e.detail.value) |
||||
|
}, |
||||
|
confirm(value) { |
||||
|
if (value.trim()) { |
||||
|
this.$emit('change', value) |
||||
|
} |
||||
|
}, |
||||
|
minusTap() { |
||||
|
if(this.value == 0){ |
||||
|
return |
||||
|
} |
||||
|
this.value-- |
||||
|
}, |
||||
|
addTap() { |
||||
|
this.value++ |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.warpper{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
.minus-box { |
||||
|
width: 64rpx; |
||||
|
height: 64rpx; |
||||
|
line-height: 64rpx; |
||||
|
text-align: center; |
||||
|
background: #F2F3F5; |
||||
|
border-radius: 8rpx; |
||||
|
color: #007AFF; |
||||
|
} |
||||
|
.quantity-input { |
||||
|
width: 120rpx; |
||||
|
height: 64rpx; |
||||
|
background: #F2F3F5; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,24 @@ |
|||||
|
<template> |
||||
|
<view class="gap"></view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.gap { |
||||
|
height: 20rpx; |
||||
|
width: 100%; |
||||
|
background: #f4f4f5; |
||||
|
} |
||||
|
</style> |
||||
@ -1,40 +1,273 @@ |
|||||
<template> |
<template> |
||||
<view class="content"> |
|
||||
mine |
|
||||
|
<view class="warpper"> |
||||
|
<uni-nav-bar> |
||||
|
<view slot="left" class="left-title">购物车</view> |
||||
|
<view slot="right" class="right-title">删除</view> |
||||
|
</uni-nav-bar> |
||||
|
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> |
||||
|
<view class="group-box" v-for="(item, index) in 6" :key="index"> |
||||
|
<uGap></uGap> |
||||
|
<view class="group-checkbox"> |
||||
|
<view class="checkbox"> |
||||
|
<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" /></checkbox-group> |
||||
|
</view> |
||||
|
<view class="">广州市荔湾区强丰纸业</view> |
||||
|
</view> |
||||
|
<view class="list-box" v-for="(subItem, subIndex) in 2" :key="subIndex"> |
||||
|
<view class="checkbox"> |
||||
|
<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" /></checkbox-group> |
||||
|
</view> |
||||
|
<view class="list-row"> |
||||
|
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> |
||||
|
<view class="right"> |
||||
|
<view class="name">晨鸣丽品白卡</view> |
||||
|
<view class="measure">245g｜787*1092</view> |
||||
|
<view class="weight">预估重量：1.6346吨</view> |
||||
|
<view class="price-row"> |
||||
|
<view class="value">¥3600.00</view> |
||||
|
<view class=""><qnInputNumber @change="change" /></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</scroll-list> |
||||
|
<!-- <qn-footer fixed height="100rpx" > |
||||
|
<view class="row"> |
||||
|
<view class="left"> |
||||
|
<view class=""> |
||||
|
<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)"></checkbox></checkbox-group> |
||||
|
</view> |
||||
|
<view class=""><text class="check-text">全选</text></view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class=""> |
||||
|
<text class="name">应付：</text> |
||||
|
<text class="value">¥7200.00</text> |
||||
|
</view> |
||||
|
<view class="right-balance-btn">结算</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</qn-footer> --> |
||||
|
<view class="footer-box"> |
||||
|
<view class="row"> |
||||
|
<view class="left"> |
||||
|
<view class=""> |
||||
|
<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)"></checkbox></checkbox-group> |
||||
|
</view> |
||||
|
<view class=""><text class="check-text">全选</text></view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class=""> |
||||
|
<text class="name">应付：</text> |
||||
|
<text class="value">¥7200.00</text> |
||||
|
</view> |
||||
|
<view class="right-balance-btn">结算</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import uGap from '@/components/u-gap/u-gap.vue' |
||||
|
import qnFooter from '@/components/qn-footer/qn-footer.vue' |
||||
|
import { back, go2 } from '@/utils/hook.js' |
||||
|
import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue' |
||||
|
export default { |
||||
|
components: { uGap, qnInputNumber, qnFooter }, |
||||
|
data() { |
||||
|
return { |
||||
|
option: { |
||||
|
size: 10, |
||||
|
auto: true, |
||||
|
// height: '90%', |
||||
|
emptyText: '暂无数据~', |
||||
|
background: '#F7F8FA', |
||||
|
disabled: false |
||||
|
}, |
||||
|
params: {}, |
||||
|
pagination: { |
||||
|
pageNum: 0, // 初始会执行一次下拉加载 |
||||
|
pageSize: 10 |
||||
|
}, |
||||
|
checked: false, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
let that = this |
||||
|
uni.getSystemInfo({ |
||||
|
success: function (res) { |
||||
|
console.log( '状态栏的高', res.statusBarHeight); |
||||
|
that.option.height = (res.windowHeight) * (750/res.windowWidth) - 180 |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
onLoad() { |
||||
|
|
||||
export default { |
|
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
downCallback() {}, |
||||
|
upCallback() {}, |
||||
|
/** |
||||
|
* @param {Number} num |
||||
|
* 计数器返回值 |
||||
|
*/ |
||||
|
change(num) {} |
||||
} |
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
|
||||
.content { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
|
<style lang="scss"> |
||||
|
.warpper { |
||||
|
.left-title { |
||||
|
font-size: 40rpx; |
||||
|
color: #000000; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 500; |
||||
} |
} |
||||
|
|
||||
.logo { |
|
||||
height: 200rpx; |
|
||||
width: 200rpx; |
|
||||
margin-top: 200rpx; |
|
||||
margin-left: auto; |
|
||||
margin-right: auto; |
|
||||
margin-bottom: 50rpx; |
|
||||
|
.right-title { |
||||
|
font-size: 28rpx; |
||||
|
color: #f5222d; |
||||
|
text-align: right; |
||||
|
font-weight: 500; |
||||
} |
} |
||||
|
|
||||
.text-area { |
|
||||
|
.group-box { |
||||
|
// padding: 0rpx 32rpx; |
||||
|
.group-checkbox { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
height: 88rpx; |
||||
|
background: #ffffff; |
||||
|
padding: 0rpx 32rpx; |
||||
|
} |
||||
|
} |
||||
|
.checkbox { |
||||
|
flex: 0 0 35rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.list-box { |
||||
|
width: 100%; |
||||
display: flex; |
display: flex; |
||||
justify-content: center; |
|
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
border-top: 2rpx solid #d8d8d8; |
||||
|
padding: 28rpx 32rpx 40rpx 32rpx; |
||||
|
.list-row { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.image { |
||||
|
flex: 0 0 180rpx; |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
border-radius: 8px; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
.right { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.name { |
||||
|
font-size: 34rpx; |
||||
|
color: #333333; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 600; |
||||
|
padding-top: 10rpx; |
||||
|
} |
||||
|
.measure { |
||||
|
font-size: 24rpx; |
||||
|
color: #333333; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 500; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
.weight { |
||||
|
text-align: center; |
||||
|
font-size: 24rpx; |
||||
|
color: #888888; |
||||
|
font-weight: 400; |
||||
|
text-align: right; |
||||
|
padding-top: 4rpx; |
||||
|
} |
||||
|
.price-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 12rpx; |
||||
|
.value { |
||||
|
font-size: 30rpx; |
||||
|
color: #f5222d; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|
||||
.title { |
|
||||
font-size: 36rpx; |
|
||||
color: #8f8f94; |
|
||||
|
.footer-box { |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
.check-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #333333; |
||||
|
letter-spacing: 0; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
height: 96rpx; |
||||
|
background: #ffffff; |
||||
|
padding: 0rpx 32rpx; |
||||
|
.left { |
||||
|
flex: 0 0 200rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.right { |
||||
|
flex: 1; |
||||
|
// width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
.name { |
||||
|
font-size: 28rpx; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
text-align: right; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.value { |
||||
|
font-size: 36rpx; |
||||
|
color: #f5222d; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
.right-balance-btn { |
||||
|
width: 201rpx; |
||||
|
height: 76rpx; |
||||
|
line-height: 76rpx; |
||||
|
background: #007aff; |
||||
|
border-radius: 38rpx; |
||||
|
font-size: 32rpx; |
||||
|
color: #ffffff; |
||||
|
letter-spacing: 0; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,550 @@ |
|||||
|
<template> |
||||
|
<view class="warpper"> |
||||
|
<view class="swiper-dot"> |
||||
|
<uni-swiper-dot :info="info" :current="current" field="content" mode="indexes" style="height: 100%;"> |
||||
|
<swiper class="swiper-box" @change="change" style="height: 100%;"> |
||||
|
<swiper-item v-for="(item, index) in info" :key="index"> |
||||
|
<view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</uni-swiper-dot> |
||||
|
</view> |
||||
|
<uGap></uGap> |
||||
|
<view class="info-box"> |
||||
|
<view class="info"> |
||||
|
<view class="price-row"> |
||||
|
<text class="price">¥2300</text> |
||||
|
<text class="unit">/吨</text> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="name"> |
||||
|
博汇朱雀白卡 |
||||
|
</view> |
||||
|
<view class="value"> |
||||
|
库存：9600张 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list-box"> |
||||
|
<view class="label"> |
||||
|
克重： |
||||
|
</view> |
||||
|
<view class="tag-box" v-for="(titme, tindex) in 4" :key="tindex"> |
||||
|
<text>240g</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list-box"> |
||||
|
<view class="label" style="font-size: 24rpx;"> |
||||
|
规格： |
||||
|
</view> |
||||
|
<view class="tag-box" v-for="(titme, tindex) in 2" :key="tindex"> |
||||
|
<text>787*1092</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uGap></uGap> |
||||
|
<view class="other"> |
||||
|
<view class="title"> |
||||
|
商品卖点 |
||||
|
</view> |
||||
|
<view class="desc"> |
||||
|
月结30天价格，不加服务费！ |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="title"> |
||||
|
商品描述 |
||||
|
</view> |
||||
|
<view class="desc"> |
||||
|
售价全部为含税价，支持先用后付，欢迎来电查询！近期价格波动较大，请下单前先咨询价格。 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="other"> |
||||
|
<view class="title"> |
||||
|
送货说明 |
||||
|
</view> |
||||
|
<view class="desc"> |
||||
|
分切纸不足重量的，另加调机费；低于送货重量或超出送货范围的，运费另计。 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="other" style="border: none;"> |
||||
|
<view class="title"> |
||||
|
其他说明 |
||||
|
</view> |
||||
|
<view class="desc"> |
||||
|
无其他说明。 |
||||
|
</view> |
||||
|
</view> |
||||
|
<qn-footer fixed height="100rpx"> |
||||
|
<view class="footer-row"> |
||||
|
<view class="left"> |
||||
|
<view class=""> |
||||
|
<image class="icon" src="/static/imgs/paperDetails/shop-icon.png"></image> |
||||
|
<view class="label"> |
||||
|
店铺 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image> |
||||
|
<view class="label"> |
||||
|
购物车 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="" @tap='addShoppingTap'> |
||||
|
<image class="icon" src="/static/imgs/paperDetails/add-shopping-trolley.png"></image> |
||||
|
<view class="label"> |
||||
|
加购物车 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="inquiry-btn"> |
||||
|
立即询单 |
||||
|
</view> |
||||
|
<view class="book-btn" @tap='addShoppingTap'> |
||||
|
立即订购 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</qn-footer> |
||||
|
<uni-popup ref="popup" type="bottom"> |
||||
|
<view class="popup_modal"> |
||||
|
<!-- <slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot> --> |
||||
|
<view class="card-box"> |
||||
|
<view class="box"> |
||||
|
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> |
||||
|
<view class="right-box"> |
||||
|
<view class="title-row"> |
||||
|
<view class="name"> |
||||
|
博汇朱雀白卡 |
||||
|
</view> |
||||
|
<view class="close-icon" @tap="closeTap"> |
||||
|
<uni-icons size="20" type="close" color="#888888"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="price"> |
||||
|
¥7630.28 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="choose-box"> |
||||
|
<view class="label"> |
||||
|
请选择克重 |
||||
|
</view> |
||||
|
<view class="tag-row"> |
||||
|
<view |
||||
|
:class="['tag-box', kgActive === kIndex ? 'kg-select' : '']" |
||||
|
v-for="(kItem,kIndex) in weightList" |
||||
|
:key='kIndex' |
||||
|
@tap="weightTap(kItem, kIndex)"> |
||||
|
{{kItem}}g |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="choose-box"> |
||||
|
<view class="label"> |
||||
|
请选择规格 |
||||
|
</view> |
||||
|
<view class="tag-row"> |
||||
|
<view |
||||
|
:class="['tag-box', ggActive === sIndex ? 'kg-select' : '']" |
||||
|
v-for="(sItem,sIndex) in specificationList" |
||||
|
:key='sIndex' |
||||
|
@tap="specificationTap(sItem, sIndex)"> |
||||
|
{{sItem}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="input-row"> |
||||
|
<view class=""> |
||||
|
<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput> |
||||
|
</view> |
||||
|
<view class="symbol"> |
||||
|
x |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="quantity-row"> |
||||
|
<view class="label"> |
||||
|
购买数量(张) |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<qnInputNumber @change="change"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ygzl-text"> |
||||
|
预估重量：1.6346吨 |
||||
|
</view> |
||||
|
<view class="popup-footer-row"> |
||||
|
<view class="btn" @tap="confirm"> |
||||
|
确认 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import uGap from '@/components/u-gap/u-gap.vue' |
||||
|
import qnFooter from '@/components/qn-footer/qn-footer.vue' |
||||
|
import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue' |
||||
|
export default { |
||||
|
components: { uGap, qnFooter, qnInputNumber }, |
||||
|
data() { |
||||
|
return { |
||||
|
info: [ |
||||
|
{ |
||||
|
content: '内容 A' |
||||
|
}, |
||||
|
{ |
||||
|
content: '内容 B' |
||||
|
}, |
||||
|
{ |
||||
|
content: '内容 C' |
||||
|
} |
||||
|
], |
||||
|
current: 0, |
||||
|
weightList: ['240', '250', '280'], |
||||
|
specificationList: ['正度', '大度', '特规分切'], |
||||
|
kgActive: 0, |
||||
|
ggActive: 0, |
||||
|
value: null, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
addShoppingTap() { |
||||
|
this.$refs.popup.open('bottom') |
||||
|
}, |
||||
|
closeTap() { |
||||
|
this.$refs.popup.close() |
||||
|
}, |
||||
|
// 重量切换 |
||||
|
weightTap(item, index) { |
||||
|
this.kgActive = index |
||||
|
}, |
||||
|
// 规格切换 |
||||
|
specificationTap(item, index) { |
||||
|
this.ggActive = index |
||||
|
}, |
||||
|
/** |
||||
|
* @param {Number} num |
||||
|
* 计数器返回值 |
||||
|
*/ |
||||
|
change(num) { |
||||
|
|
||||
|
}, |
||||
|
// 确定 |
||||
|
confirm() { |
||||
|
this.$refs.popup.close() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.warpper { |
||||
|
.swiper-dot { |
||||
|
width: 100%; |
||||
|
height: 500rpx; |
||||
|
} |
||||
|
.image { |
||||
|
width: 100%; |
||||
|
height: 500rpx; |
||||
|
} |
||||
|
.info-box { |
||||
|
height: 370rpx; |
||||
|
background: #FFFFFF; |
||||
|
.info { |
||||
|
padding: 0rpx 32rpx; |
||||
|
.price-row { |
||||
|
padding: 20rpx 0rpx; |
||||
|
} |
||||
|
.price { |
||||
|
font-size: 48rpx; |
||||
|
color: #F5222D; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 500; |
||||
|
|
||||
|
} |
||||
|
.unit { |
||||
|
font-size: 28rpx; |
||||
|
color: #F5222D; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding-bottom: 20rpx; |
||||
|
.name { |
||||
|
font-size: 34rpx; |
||||
|
color: #000000; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.value { |
||||
|
font-size: 24rpx; |
||||
|
color: rgba(0,0,0,0.55); |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.list-box { |
||||
|
margin: 0rpx 32rpx; |
||||
|
height: 104rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
border-top: 2rpx solid rgba($color: #DDDDDD, $alpha: 0.8); |
||||
|
.label { |
||||
|
flex: 0 0 84rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.tag-box { |
||||
|
height: 60rpx; |
||||
|
line-height: 60rpx; |
||||
|
text-align: center; |
||||
|
background: #F4F5F6; |
||||
|
border-radius: 4rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #555555; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 400; |
||||
|
margin-right: 10rpx; |
||||
|
padding: 0rpx 17rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.other { |
||||
|
padding: 0rpx 32rpx; |
||||
|
border-bottom: 2rpx solid #D8D8D8; |
||||
|
background: #FFFFFF; |
||||
|
.title { |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 500; |
||||
|
padding: 24rpx 0rpx 16rpx 0rpx; |
||||
|
} |
||||
|
.desc { |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 400; |
||||
|
padding: 0rpx 0rpx 24rpx 0rpx; |
||||
|
} |
||||
|
} |
||||
|
.footer-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
// align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0rpx 32rpx; |
||||
|
.left { |
||||
|
flex: 0 0 294rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
text-align: center; |
||||
|
padding-right: 24rpx; |
||||
|
.icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
.label { |
||||
|
font-size: 22rpx; |
||||
|
color: #555555; |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 400; |
||||
|
padding-top: 6rpx; |
||||
|
} |
||||
|
} |
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #FFFFFF; |
||||
|
letter-spacing: 0; |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
.inquiry-btn{ |
||||
|
width: 200rpx; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
background: #FAAB0C; |
||||
|
border-top-left-radius: 2002000rpx; |
||||
|
border-bottom-left-radius: 2002000rpx; |
||||
|
} |
||||
|
.book-btn{ |
||||
|
width: 200rpx; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
background: #EE0A24; |
||||
|
border-top-right-radius: 2002000rpx; |
||||
|
border-bottom-right-radius: 2002000rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.popup_modal { |
||||
|
// height: 960rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
.card-box { |
||||
|
padding: 0rpx 32rpx; |
||||
|
.box { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
// align-items: center; |
||||
|
// height: 240rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-bottom: 2rpx solid #D8D8D8; |
||||
|
padding: 40rpx 0rpx; |
||||
|
.image { |
||||
|
flex: 0 0 160rpx; |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
border-radius: 10px; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
.right-box { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
padding-top: 10rpx; |
||||
|
} |
||||
|
.title-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
.name { |
||||
|
font-size: 34rpx; |
||||
|
color: #000000; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 600; |
||||
|
padding-bottom: 30rpx; |
||||
|
} |
||||
|
.close-icon{ |
||||
|
position: relative; |
||||
|
top: -20rpx; |
||||
|
} |
||||
|
} |
||||
|
.price{ |
||||
|
font-size: 40rpx; |
||||
|
color: #F5222D; |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.choose-box{ |
||||
|
border-bottom: 2rpx solid #D8D8D8; |
||||
|
padding: 24rpx 32rpx; |
||||
|
.label{ |
||||
|
font-size: 30rpx; |
||||
|
color: rgba(0,0,0,0.85); |
||||
|
letter-spacing: 0; |
||||
|
text-align: left; |
||||
|
font-weight: 400; |
||||
|
padding: 0rpx 0rpx 20rpx 0rpx; |
||||
|
} |
||||
|
.tag-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.tag-box{ |
||||
|
padding: 0rpx 47rpx; |
||||
|
height: 60rpx; |
||||
|
line-height: 60rpx; |
||||
|
background: #F5F5F5; |
||||
|
border-radius: 8px; |
||||
|
margin-right: 12rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: rgba(0,0,0,0.75); |
||||
|
text-align: center; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.kg-select { |
||||
|
background: #1890FF; |
||||
|
color: #FFFFFF; |
||||
|
|
||||
|
} |
||||
|
.input-row{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
padding-top: 20rpx; |
||||
|
.easyinput{ |
||||
|
height: 64rpx; |
||||
|
background: #F5F5F5; |
||||
|
border-radius: 8rpx; |
||||
|
} |
||||
|
.symbol{ |
||||
|
padding: 0rpx 16rpx; |
||||
|
font-size: 32rpx; |
||||
|
color: rgba(0,0,0,0.85); |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.quantity-row{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 32rpx 32rpx 0rpx 32rpx; |
||||
|
.label{ |
||||
|
font-size: 30rpx; |
||||
|
color: rgba(0,0,0,0.85); |
||||
|
letter-spacing: 0; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
} |
||||
|
.ygzl-text{ |
||||
|
padding:20rpx 32rpx 0rpx ; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
font-family: PingFangSC-Regular; |
||||
|
font-size: 24rpx; |
||||
|
color: rgba(0,0,0,0.50); |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.popup-footer-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
padding: 48rpx 32rpx 20rpx 32rpx; |
||||
|
.btn { |
||||
|
width: 686rpx; |
||||
|
height: 96rpx; |
||||
|
line-height: 96rpx; |
||||
|
text-align: center; |
||||
|
background: #007AFF; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 36rpx; |
||||
|
color: #FFFFFF; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
| Before | After |
|---|---|
|
|
| Width: 40 | Height: 40 | Size: 954 B |
| Before | After |
|---|---|
|
|
| Width: 40 | Height: 40 | Size: 969 B |
| Before | After |
|---|---|
|
|
| Width: 40 | Height: 40 | Size: 922 B |
| Before | After |
|---|---|
|
|
| Width: 110 | Height: 110 | Size: 3.0 KiB |
@ -0,0 +1,12 @@ |
|||||
|
## 1.2.0（2021-11-19） |
||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot) |
||||
|
## 1.1.0（2021-07-30） |
||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||
|
## 1.0.6（2021-05-12） |
||||
|
- 新增 示例地址 |
||||
|
- 修复 示例项目缺少组件的Bug |
||||
|
## 1.0.5（2021-02-05） |
||||
|
- 调整为uni_modules目录规范 |
||||
|
- 新增 clickItem 事件，支持指示点控制轮播 |
||||
|
- 新增 支持 pc 可用 |
||||
@ -0,0 +1,218 @@ |
|||||
|
<template> |
||||
|
<view class="uni-swiper__warp"> |
||||
|
<slot /> |
||||
|
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'> |
||||
|
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{ |
||||
|
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}" |
||||
|
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" /> |
||||
|
</view> |
||||
|
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'> |
||||
|
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{ |
||||
|
'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" |
||||
|
:key="index" class="uni-swiper__dots-item" /> |
||||
|
</view> |
||||
|
<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'> |
||||
|
<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{ |
||||
|
'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" |
||||
|
:key="index" class="uni-swiper__dots-item " /> |
||||
|
</view> |
||||
|
<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav"> |
||||
|
<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text> |
||||
|
</view> |
||||
|
<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box"> |
||||
|
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{ |
||||
|
'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" |
||||
|
:key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
/** |
||||
|
* SwiperDod 轮播图指示点 |
||||
|
* @description 自定义轮播图指示点 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=284 |
||||
|
* @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current` |
||||
|
* @property {String} mode = [default|round|nav|indexes] 指示点的类型 |
||||
|
* @value defualt 默认指示点 |
||||
|
* @value round 圆形指示点 |
||||
|
* @value nav 条形指示点 |
||||
|
* @value indexes 索引指示点 |
||||
|
* @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填） |
||||
|
* @property {String} info 轮播图的数据，通过数组长度决定指示点个数 |
||||
|
* @property {Object} dotsStyles 指示点样式 |
||||
|
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex} |
||||
|
*/ |
||||
|
|
||||
|
export default { |
||||
|
name: 'UniSwiperDot', |
||||
|
emits:['clickItem'], |
||||
|
props: { |
||||
|
info: { |
||||
|
type: Array, |
||||
|
default () { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
current: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
dotsStyles: { |
||||
|
type: Object, |
||||
|
default () { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
// 类型 ：default(默认) indexes long nav |
||||
|
mode: { |
||||
|
type: String, |
||||
|
default: 'default' |
||||
|
}, |
||||
|
// 只在 nav 模式下生效，变量名称 |
||||
|
field: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dots: { |
||||
|
width: 6, |
||||
|
height: 6, |
||||
|
bottom: 10, |
||||
|
color: '#fff', |
||||
|
backgroundColor: 'rgba(0, 0, 0, .3)', |
||||
|
border: '1px rgba(0, 0, 0, .3) solid', |
||||
|
selectedBackgroundColor: '#333', |
||||
|
selectedBorder: '1px rgba(0, 0, 0, .9) solid' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
dotsStyles(newVal) { |
||||
|
this.dots = Object.assign(this.dots, this.dotsStyles) |
||||
|
}, |
||||
|
mode(newVal) { |
||||
|
if (newVal === 'indexes') { |
||||
|
this.dots.width = 14 |
||||
|
this.dots.height = 14 |
||||
|
} else { |
||||
|
this.dots.width = 6 |
||||
|
this.dots.height = 6 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
created() { |
||||
|
if (this.mode === 'indexes') { |
||||
|
this.dots.width = 12 |
||||
|
this.dots.height = 12 |
||||
|
} |
||||
|
this.dots = Object.assign(this.dots, this.dotsStyles) |
||||
|
}, |
||||
|
methods: { |
||||
|
clickItem(index) { |
||||
|
this.$emit('clickItem', index) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.uni-swiper__warp { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex: 1; |
||||
|
flex-direction: column; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-box { |
||||
|
position: absolute; |
||||
|
bottom: 10px; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex: 1; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-item { |
||||
|
width: 8px; |
||||
|
border-radius: 100px; |
||||
|
margin-left: 6px; |
||||
|
background-color: rgba(0, 0, 0, 0.4); |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
/* #ifdef H5 */ |
||||
|
// border-width: 5px 0; |
||||
|
// border-style: solid; |
||||
|
// border-color: transparent; |
||||
|
// background-clip: padding-box; |
||||
|
/* #endif */ |
||||
|
// transition: width 0.2s linear; 不要取消注释，不然会不能变色 |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-item:first-child { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-default { |
||||
|
border-radius: 100px; |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-long { |
||||
|
border-radius: 50px; |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-bar { |
||||
|
border-radius: 50px; |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-nav { |
||||
|
bottom: 0px; |
||||
|
// height: 26px; |
||||
|
padding: 8px 0; |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex: 1; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
background-color: rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-nav-item { |
||||
|
/* overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; */ |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
margin: 0 15px; |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-indexes { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
// flex: 1; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.uni-swiper__dots-indexes-text { |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
line-height: 14px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,87 @@ |
|||||
|
{ |
||||
|
"id": "uni-swiper-dot", |
||||
|
"displayName": "uni-swiper-dot 轮播图指示点", |
||||
|
"version": "1.2.0", |
||||
|
"description": "自定义轮播图指示点组件", |
||||
|
"keywords": [ |
||||
|
"uni-ui", |
||||
|
"uniui", |
||||
|
"轮播图指示点", |
||||
|
"dot", |
||||
|
"swiper" |
||||
|
], |
||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||
|
"engines": { |
||||
|
"HBuilderX": "" |
||||
|
}, |
||||
|
"directories": { |
||||
|
"example": "../../temps/example_temps" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"category": [ |
||||
|
"前端组件", |
||||
|
"通用组件" |
||||
|
], |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "无", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": ["uni-scss"], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y" |
||||
|
}, |
||||
|
"client": { |
||||
|
"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" |
||||
|
}, |
||||
|
"Vue": { |
||||
|
"vue2": "y", |
||||
|
"vue3": "y" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
|
||||
|
|
||||
|
## SwiperDot 轮播图指示点 |
||||
|
> **组件名：uni-swiper-dot** |
||||
|
> 代码块： `uSwiperDot` |
||||
|
|
||||
|
|
||||
|
自定义轮播图指示点 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot) |
||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
Write
Preview
Loading…
Cancel
Save