qniao
/
paper-shopkeeper-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

交易-报价模块，订单模块列表界面

devlop
杨阁辉 4 years ago
parent
6b8871f089
commit
1881bf0cd2
23 changed files with 3301 additions and 25 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      apis/trade.js
  2. 65
      components/not-logged/not-logged.vue
  3. 39
      pages.json
  4. 128
      pages/trade/index.vue
  5. 208
      pages/trade/my-offer.vue
  6. 201
      pages/trade/orderList.vue
  7. 268
      pages/trade/quotationList.vue
  8. BIN
      static/imgs/trade/not-login.png
  9. 29
      uni_modules/uni-badge/changelog.md
  10. 268
      uni_modules/uni-badge/components/uni-badge/uni-badge.vue
  11. 88
      uni_modules/uni-badge/package.json
  12. 10
      uni_modules/uni-badge/readme.md
  13. 18
      uni_modules/uni-list/changelog.md
  14. 107
      uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
  15. 58
      uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
  16. 538
      uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
  17. 474
      uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
  18. 106
      uni_modules/uni-list/components/uni-list/uni-list - 副本.vue
  19. 108
      uni_modules/uni-list/components/uni-list/uni-list.vue
  20. 65
      uni_modules/uni-list/components/uni-list/uni-refresh.vue
  21. 87
      uni_modules/uni-list/components/uni-list/uni-refresh.wxs
  22. 91
      uni_modules/uni-list/package.json
  23. 347
      uni_modules/uni-list/readme.md

23
apis/trade.js
View File

@ -0,0 +1,23 @@
import http from '../utils/http/index.js'
// 交易大厅-报价
export function getEnterpriseList(data) {
return http.get(
{
url: '/base-paper-trading/get/supplier/enquiry-reply/wait-reply-list',
data
},
{ hideLoading: true }
)
}
// 交易大厅-订单
export function gettradingHallList(data) {
return http.get(
{
url: '/base-paper-trading/get/trading-hall/supplier-order-page',
data
},
{ hideLoading: true }
)
}

65
components/not-logged/not-logged.vue
View File

@ -0,0 +1,65 @@
<template>
<view class="not-logged">
<view class="view-contant">
<image class="view-image" src="../../static/imgs/trade/not-login.png" mode=""></image>
<view class="text-info">
登录后可以查看更多，请先登录
</view>
<view class="login-btn">
<button type="primary" class="login-btn-text login-btn" @click="loginClick()">登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
loginClick(){
this.$emit('loginChange')
}
}
}
</script>
<style lang="scss">
.not-logged{
.text-info{
font-family: PingFangSC-Regular;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
font-weight: 550;
margin-top: 50rpx;
}
.view-contant{
text-align: center;
margin-top: 40%;
}
.view-image{
width: 100rpx;
height: 100rpx;
}
.login-btn{
width: 90%;
height: 86rpx;
background: #007AFF;
border-radius: 425px;
margin-left: 5%;
margin-top: 121rpx;
}
.login-btn-text{
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
font-weight: 400;
}
}
</style>

39
pages.json
View File

@ -33,7 +33,8 @@
{
"path": "pages/trade/index",
"style": {
"navigationBarTitleText": "交易"
"navigationBarTitleText": "交易",
"navigationStyle": "custom"
}
},
{
@ -114,6 +115,42 @@
}
}
,{
"path" : "components/not-logged/not-logged",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/trade/quotationList",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/trade/orderList",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/trade/my-offer",
"style" :
{
"navigationBarTitleText": "我的报价",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",

128
pages/trade/index.vue
View File

@ -1,40 +1,120 @@
<template>
<view class="content">
trade
<view class="trade-index">
<view class="top-bar">
<view v-if="mainKey === '0'" class="text-view"><text class="title">交易大厅</text></view>
<view v-if="mainKey === '1'">
<view class="bar-contant">
<view class="check-control title-left36" :class="current === '0' ? 'check-title' : 'oncheck-title'" @click="controlChange('0')"><text>报价</text></view>
<view class="check-control title-left" :class="current === '1' ? 'check-title' : 'oncheck-title'" @click="controlChange('1')"><text>订单</text></view>
</view>
</view>
</view>
<view class="" v-if="mainKey === '0'"><not-logged @loginChange="loginChange()"></not-logged></view>
<view class="" v-if="mainKey === '1'">
<view class="content">
<view v-show="current === '0'">
<quotationList></quotationList>
</view>
<view v-show="current === '1'">
<orderList></orderList>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
import notLogged from '@/components/not-logged/not-logged.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import quotationList from './quotationList.vue'
import orderList from './orderList.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
components: { notLogged, scrollList, quotationList, orderList },
data() {
return {
key: '',
mainKey: '1',
current: '0',
controlCurrent: 0,
items: ['报价', '订单'],
controlItems: ['全部', '待确认', '待发货', '已完成'],
}
},
mounted() {
// this.getQuotationQurty()
},
watch: {
},
methods: {
loginChange() {
this.mainKey === '0' ? '1' : '0'
},
// 标题选项卡点击事件
controlChange(value) {
this.current = value
// if (value === '0') {
// this.getQuotationQurty()
// } else {
// this.getTradingQurty()
// }
},
//分段器点击事件
onClickItem(value) {
console.log(value)
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
<style lang="scss">
.trade-index {
.top-bar {
background-color: rgb(255, 255, 255);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
z-index: 998;
height: 44px;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
.title {
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
}
.text-area {
.text-view {
padding: 10px;
}
.bar-contant {
display: flex;
justify-content: center;
}
.check-title {
font-family: PingFangSC-Medium;
font-size: 40rpx;
color: #000000;
letter-spacing: 0;
font-weight: 550;
border-bottom: 2px solid #007aff;
}
.oncheck-title {
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #555555;
font-weight: 550;
}
.check-control {
line-height: 35px;
.title {
font-size: 36rpx;
color: #8f8f94;
width: 40px;
text-align: center;
}
.title-left {
margin-left: 24rpx;
}
.title-left36 {
margin-left: 36rpx;
}
}
</style>

208
pages/trade/my-offer.vue
View File

@ -0,0 +1,208 @@
<template>
<view class="my-offer">
<!-- <uni-segmented-control :current="controlCurrent" :values="controlItems" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control> -->
<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
<view v-for="(items,index) in orderData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">{{ items.orderStatus }}</text>
</view>
<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
<view class="list-info list-border">
<view class=""><image class="list-image" :src="item.productImg" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
<view class="list-info-text">
{{ item.categoryName }}/{{ item.brandName }}/{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张
</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text class="list-time">三分钟前</text>
<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
// props: {
// queryOrderData: {
// type: Object,
// default: () => {}
// }
// },
components: {
uGap
},
data() {
return {
orderPagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
orderData: [],
orderOption: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
orderParams: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
}
}
},
watch: {
// queryOrderData(value) {
// console.log('value', value)
// },
orderParams: {
handler(val) {
this.getTradingQurty()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getTradingQurty()
},
methods: {
// 获取订单列表
getTradingQurty() {
return new Promise((resolve, reject) => {
gettradingHallList({ ...this.orderParams, ...this.orderPagination })
.then(res => {
if (res) {
if (this.orderPagination.pageNum == 1) {
this.orderData = res.records
} else {
this.orderData = this.orderData.concat(res.records)
}
resolve({ list: this.orderData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//订单分页
orderUp(page) {
this.orderPagination.pageNum++
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
//订单分页
orderDown() {
this.orderPagination.pageNum = 1
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.refreshFail()
})
}
}
}
</script>
<style lang="scss">
.my-offer {
margin-bottom: 0px;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.list-title-line {
line-height: 44px;
padding-left: 24px;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 24px;
line-height: 35px;
}
.list-info-contant {
margin-left: 24px;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 32px;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 10px;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 35px;
padding-left: 24px;
}
.list-time{
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
line-height: 32px;
font-weight: 400;
}
}
</style>

201
pages/trade/orderList.vue
View File

@ -0,0 +1,201 @@
<template>
<view class="order-list">
<!-- <uni-segmented-control :current="controlCurrent" :values="controlItems" @clickItem="onClickItem" styleType="text" activeColor="#007AFF"></uni-segmented-control> -->
<scroll-list style="touch-action: none" ref="orderRef" :option="orderOption" @load="orderUp" @refresh="orderDown">
<view v-for="(items,index) in orderData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">{{ items.orderStatus }}</text>
</view>
<view class="list-border list-info-line" v-for="(item, index) in items.orderItemList" :key="index">
<view class="list-info list-border">
<view class=""><image class="list-image" :src="item.productImg" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">{{ item.brandName }}{{ item.categoryName }}</view>
<view class="list-info-text">
{{ item.categoryName }}/{{ item.brandName }}/{{ item.gramWeight }}g/{{ item.length }}*{{ item.width }}/{{ item.pieceQuantity }}张
</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text>交货时间：</text>
<text>{{ items.deliveryDay }}天</text>
<text class="list-title-Subtitle">¥{{ items.totalOfferPrice }}</text>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
</view>
</template>
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import scrollList from '@/components/scroll-list/scroll-list.vue'
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
export default {
// props: {
// queryOrderData: {
// type: Object,
// default: () => {}
// }
// },
components: {
uGap
},
data() {
return {
orderPagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
orderData: [],
orderOption: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
orderParams: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
}
}
},
watch: {
// queryOrderData(value) {
// console.log('value', value)
// },
orderParams: {
handler(val) {
this.getTradingQurty()
},
deep: true
}
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getTradingQurty()
},
methods: {
// 获取订单列表
getTradingQurty() {
return new Promise((resolve, reject) => {
gettradingHallList({ ...this.orderParams, ...this.orderPagination })
.then(res => {
if (res) {
if (this.orderPagination.pageNum == 1) {
this.orderData = res.records
} else {
this.orderData = this.orderData.concat(res.records)
}
resolve({ list: this.orderData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//订单分页
orderUp(page) {
this.orderPagination.pageNum++
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.loadFail()
})
},
//订单分页
orderDown() {
this.orderPagination.pageNum = 1
this.getTradingQurty()
.then(({ list, total }) => {
this.$refs.orderRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.orderRef.refreshFail()
})
}
}
}
</script>
<style lang="scss">
.order-list {
margin-bottom: 0px;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.list-title-line {
line-height: 44px;
padding-left: 24px;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 24px;
line-height: 35px;
}
.list-info-contant {
margin-left: 24px;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 32px;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 10px;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 35px;
padding-left: 24px;
}
}
</style>

268
pages/trade/quotationList.vue
View File

@ -0,0 +1,268 @@
<template>
<view class="quotation-list">
<scroll-list ref="quotationRef" :option="option" @load="quotationUp" @refresh="quotationDown">
<view v-for="(item,index) in quotationData" :key="index">
<view class="list-border list-title-line">
<text class="list-title">广州民族印刷有限公司</text>
<text class="list-title-Subtitle">待报价</text>
</view>
<view class="list-border list-info-line">
<view class="list-info list-border">
<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">金蝶蓝白卡</view>
<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
</view>
</view>
<view class="list-info">
<view class=""><image class="list-image" src="../../static/logo.png" mode=""></image></view>
<view class="list-info-contant">
<view class="list-info-title">金蝶蓝白卡</view>
<view class="list-info-text">白卡纸/金蝶蓝/350g/787*1092/2200张</view>
</view>
</view>
</view>
<view class="list-border list-bottom-contant">
<view>
<text>交货时间：</text>
<text>3天</text>
</view>
<view>
<text>交货区域：</text>
<text>3天</text>
</view>
<view class="offer-class">
<view class="offer-width">
<text>报价截止：</text>
<text>3天</text>
</view>
<view>
<button type="primary" class="offer-btn" @click="offerClick()">报价</button>
</view>
</view>
</view>
<uGap></uGap>
</view>
</scroll-list>
<view>
<view class="offer-prices" @click="nativeTo()">
<image class="my-image" src="../../static/imgs/tabbar/trade-gray.png" mode=""></image>
<view class="my-price">
我的报价
</view>
</view>
</view>
</view>
</template>
<script>
import { getEnterpriseList, gettradingHallList } from '@/apis/trade'
import uGap from '@/components/u-gap/u-gap.vue'
export default {
props: {
queryData: {
type: Object,
default: () => {}
}
},
components: {
uGap
},
data() {
return {
option: {
size: 10,
auto: true,
emptyText: '暂无报价信息~',
background: '#F7F8FA',
fontSize: '40rpx'
},
params: {
cooperationState: 0,
latitude: 23.12616,
longitude: 113.38466,
km: 5
},
pagination: {
pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10
},
quotationData:[]
}
},
watch: {
params: {
handler(val) {
this.getQuotationQurty()
},
deep: true
},
},
onLoad(option) {
if (option) {
option.latitude && (this.params.latitude = option.latitude)
option.longitude && (this.params.longitude = option.longitude)
option.km && (this.params.km = option.km)
}
this.getQuotationQurty()
},
methods: {
// 获取报价列表
getQuotationQurty() {
return new Promise((resolve, reject) => {
getEnterpriseList({ ...this.params, ...this.pagination })
.then(res => {
if (res) {
if (this.pagination.pageNum == 1) {
// this.quotationData = res.records
this.quotationData = []
this.quotationData = [{ name: '111', id: '222' }, { name: '111', id: '222' }]
} else {
this.quotationData = this.quotationData.concat(res.records)
}
console.log('this.quotationData', res)
resolve({ list: this.quotationData, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
//报价分页
quotationUp(page) {
this.pagination.pageNum++
this.getQuotationQurty()
.then(({ list, total }) => {
this.$refs.quotationRef.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.quotationRef.loadFail()
})
},
//报价分页
quotationDown() {
this.pagination.pageNum = 1
this.getQuotationQurty()
.then(({ list, total }) => {
this.$refs.quotationRef.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.quotationRef.refreshFail()
})
},
// 报价按钮事件
offerClick(){},
// 我的报价页面跳转事件
nativeTo(){
console.log(11)
uni.navigateTo({
url: 'my-offer'
});
},
}
}
</script>
<style lang="scss">
.quotation-list {
margin-bottom: 0px;
.list-border {
// border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.list-title-line {
line-height: 44px;
padding-left: 24px;
}
.list-title {
font-family: PingFangSC-Semibold;
font-size: 30rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.list-title-Subtitle {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #ff5368;
letter-spacing: 0;
text-align: right;
font-weight: 500;
float: right;
margin-right: 32rpx;
}
.list-info-line {
padding-left: 24px;
line-height: 35px;
}
.list-info-contant {
margin-left: 24px;
}
.list-info-title {
font-family: PingFangSC-Medium;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: left;
font-weight: 550;
}
.list-info-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 32px;
font-weight: 400;
}
.list-image {
width: 100rpx;
height: 100rpx;
margin-top: 10px;
}
.list-info {
display: flex;
}
.list-bottom-contant {
line-height: 35px;
padding-left: 24px;
padding-bottom: 24px;
}
.my-image {
width: 30px;
height: 30px;
}
.my-price {
color: #007aff;
font-size: 28rpx;
}
.offer-class{
display: flex;
}
.offer-btn{
width: 80px;
line-height: 35px;
}
.offer-width{
width: 70%;
}
.offer-prices{
position: absolute;
z-index: 9999;
right: 10px;
bottom: 20%;
background-color: #ffffff;
border-radius: 50%;
padding: 10px;
text-align: center;
width: 80px;
height: 80px;
border: 2px solid #F9F9F9;
box-shadow: 0px 4px 34px 0px rgba(0,0,0,0.2);
}
}
</style>

BIN
static/imgs/trade/not-login.png
View File

Before After
Width: 750  |  Height: 456  |  Size: 72 KiB

29
uni_modules/uni-badge/changelog.md
View File

@ -0,0 +1,29 @@
## 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-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
## 1.1.7（2021-11-08）
- 优化 升级ui
- 修改 size 属性默认值调整为 small
- 修改 type 属性，默认值调整为 error，info 替换 default
## 1.1.6（2021-09-22）
- 修复 在字节小程序上样式不生效的 bug
## 1.1.5（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.4（2021-07-29）
- 修复 去掉 nvue 不支持css 的 align-self 属性，nvue 下不暂支持 absolute 属性
## 1.1.3（2021-06-24）
- 优化 示例项目
## 1.1.1（2021-05-12）
- 新增 组件示例地址
## 1.1.0（2021-05-12）
- 新增 uni-badge 的 absolute 属性，支持定位
- 新增 uni-badge 的 offset 属性，支持定位偏移
- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
## 1.0.7（2021-05-07）
- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
- 新增 uni-badge 属性 custom-style， 支持自定义样式
## 1.0.6（2021-02-04）
- 调整为uni_modules目录规范

268
uni_modules/uni-badge/components/uni-badge/uni-badge.vue
View File

@ -0,0 +1,268 @@
<template>
<view class="uni-badge--x">
<slot />
<text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
class="uni-badge" @click="onClick()">{{displayValue}}</text>
</view>
</template>
<script>
/**
* Badge 数字角标
* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
* @property {String} text 角标内容
* @property {String} size = [normal|small] 角标内容
* @property {String} type = [info|primary|success|warning|error] 颜色类型
* @value info 灰色
* @value primary 蓝色
* @value success 绿色
* @value warning 黄色
* @value error 红色
* @property {String} inverted = [true|false] 是否无需背景颜色
* @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
* @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
* @value rightTop 右上
* @value rightBottom 右下
* @value leftTop 左上
* @value leftBottom 左下
* @property {Array[number]} offset 距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
* @property {String} isDot = [true|false] 是否显示为一个小点
* @event {Function} click 点击 Badge 触发事件
* @example <uni-badge text="1"></uni-badge>
*/
export default {
name: 'UniBadge',
emits: ['click'],
props: {
type: {
type: String,
default: 'error'
},
inverted: {
type: Boolean,
default: false
},
isDot: {
type: Boolean,
default: false
},
maxNum: {
type: Number,
default: 99
},
absolute: {
type: String,
default: ''
},
offset: {
type: Array,
default () {
return [0, 0]
}
},
text: {
type: [String, Number],
default: ''
},
size: {
type: String,
default: 'small'
},
customStyle: {
type: Object,
default () {
return {}
}
}
},
data() {
return {};
},
computed: {
width() {
return String(this.text).length * 8 + 12
},
classNames() {
const {
inverted,
type,
size,
absolute
} = this
return [
inverted ? 'uni-badge--' + type + '-inverted' : '',
'uni-badge--' + type,
'uni-badge--' + size,
absolute ? 'uni-badge--absolute' : ''
].join(' ')
},
positionStyle() {
if (!this.absolute) return {}
let w = this.width / 2,
h = 10
if (this.isDot) {
w = 5
h = 5
}
const x = `${- w + this.offset[0]}px`
const y = `${- h + this.offset[1]}px`
const whiteList = {
rightTop: {
right: x,
top: y
},
rightBottom: {
right: x,
bottom: y
},
leftBottom: {
left: x,
bottom: y
},
leftTop: {
left: x,
top: y
}
}
const match = whiteList[this.absolute]
return match ? match : whiteList['rightTop']
},
badgeWidth() {
return {
width: `${this.width}px`
}
},
dotStyle() {
if (!this.isDot) return {}
return {
width: '10px',
height: '10px',
borderRadius: '10px'
}
},
displayValue() {
const {
isDot,
text,
maxNum
} = this
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
}
},
methods: {
onClick() {
this.$emit('click');
}
}
};
</script>
<style lang="scss" scoped>
$uni-primary: #2979ff !default;
$uni-success: #4cd964 !default;
$uni-warning: #f0ad4e !default;
$uni-error: #dd524d !default;
$uni-info: #909399 !default;
$bage-size: 12px;
$bage-small: scale(0.8);
.uni-badge--x {
/* #ifdef APP-NVUE */
// align-self: flex-start;
/* #endif */
/* #ifndef APP-NVUE */
display: inline-block;
/* #endif */
position: relative;
}
.uni-badge--absolute {
position: absolute;
}
.uni-badge--small {
transform: $bage-small;
transform-origin: center center;
}
.uni-badge {
/* #ifndef APP-NVUE */
display: flex;
overflow: hidden;
box-sizing: border-box;
/* #endif */
justify-content: center;
flex-direction: row;
height: 20px;
line-height: 18px;
color: #fff;
border-radius: 100px;
background-color: $uni-info;
background-color: transparent;
border: 1px solid #fff;
text-align: center;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: $bage-size;
/* #ifdef H5 */
z-index: 999;
cursor: pointer;
/* #endif */
&--info {
color: #fff;
background-color: $uni-info;
}
&--primary {
background-color: $uni-primary;
}
&--success {
background-color: $uni-success;
}
&--warning {
background-color: $uni-warning;
}
&--error {
background-color: $uni-error;
}
&--inverted {
padding: 0 5px 0 0;
color: $uni-info;
}
&--info-inverted {
color: $uni-info;
background-color: transparent;
}
&--primary-inverted {
color: $uni-primary;
background-color: transparent;
}
&--success-inverted {
color: $uni-success;
background-color: transparent;
}
&--warning-inverted {
color: $uni-warning;
background-color: transparent;
}
&--error-inverted {
color: $uni-error;
background-color: transparent;
}
}
</style>

88
uni_modules/uni-badge/package.json
View File

@ -0,0 +1,88 @@
{
"id": "uni-badge",
"displayName": "uni-badge 数字角标",
"version": "1.2.0",
"description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
"keywords": [
"",
"badge",
"uni-ui",
"uniui",
"数字角标",
"徽章"
],
"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": [],
"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"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

10
uni_modules/uni-badge/readme.md
View File

@ -0,0 +1,10 @@
## Badge 数字角标
> **组件名：uni-badge**
> 代码块： `uBadge`
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

18
uni_modules/uni-list/changelog.md
View File

@ -0,0 +1,18 @@
## 1.2.0（2021-11-23）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-list](https://uniapp.dcloud.io/component/uniui/uni-list)
## 1.1.3（2021-08-30）
- 修复 在vue3中to属性在发行应用的时候报错的bug
## 1.1.2（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.1.1（2021-07-21）
- 修复 与其他组件嵌套使用时，点击失效的Bug
## 1.1.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.17（2021-05-12）
- 新增 组件示例地址
## 1.0.16（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.0.15（2021-02-05）
- 调整为uni_modules目录规范
- 修复 uni-list-chat 角标显示不正常的问题

107
uni_modules/uni-list/components/uni-list-ad/uni-list-ad.vue
View File

@ -0,0 +1,107 @@
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view class="uni-list-ad">
<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111"
unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
export default {
name: 'UniListAd',
props: {
title: {
type: String,
default: '',
}
},
// inject: ['list'],
data() {
return {
isFirstChild: false,
border: false,
borderShow: true,
}
},
mounted() {
this.list = this.getForm()
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true
this.isFirstChild = true
}
this.border = this.list.border
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
aderror(e) {
console.log("aderror: " + JSON.stringify(e.detail));
},
closeAd(e) {
this.borderShow = false
}
}
}
</script>
<style lang="scss" scoped>
.uni-list-ad {
position: relative;
border: 1px red solid;
}
.uni-list--border {
position: relative;
padding-bottom: 1px;
/* #ifdef APP-PLUS */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
margin-left: $uni-spacing-row-lg;
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: $uni-border-color;
}
.uni-list-item--first:after {
height: 0px;
}
/* #endif */
</style>

58
uni_modules/uni-list/components/uni-list-chat/uni-list-chat.scss
View File

@ -0,0 +1,58 @@
/**
* 这里是 uni-list 组件内置的常用样式变量
* 如果需要覆盖样式，这里提供了基本的组件样式变量，您可以尝试修改这里的变量，去完成样式替换，而不用去修改源码
*
*/
// 背景色
$background-color : #fff;
// 分割线颜色
$divide-line-color : #e5e5e5;
// 默认头像大小，如需要修改此值，注意同步修改 js 中的值 const avatarWidth = xx ，目前只支持方形头像
// nvue 页面不支持修改头像大小
$avatar-width : 45px ;
// 头像边框
$avatar-border-radius: 5px;
$avatar-border-color: #eee;
$avatar-border-width: 1px;
// 标题文字样式
$title-size : 16px;
$title-color : #3b4144;
$title-weight : normal;
// 描述文字样式
$note-size : 12px;
$note-color : #999;
$note-weight : normal;
// 右侧额外内容默认样式
$right-text-size : 12px;
$right-text-color : #999;
$right-text-weight : normal;
// 角标样式
// nvue 页面不支持修改圆点位置以及大小
// 角标在左侧时，角标的位置，默认为 0 ，负数左/下移动，正数右/上移动
$badge-left: 0px;
$badge-top: 0px;
// 显示圆点时，圆点大小
$dot-width: 10px;
$dot-height: 10px;
// 显示角标时，角标大小和字体大小
$badge-size : 18px;
$badge-font : 12px;
// 显示角标时，角标前景色
$badge-color : #fff;
// 显示角标时，角标背景色
$badge-background-color : #ff5a5f;
// 显示角标时，角标左右间距
$badge-space : 6px;
// 状态样式
// 选中颜色
$hover : #f5f5f5;

538
uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
View File

@ -0,0 +1,538 @@
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
<view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
<view class="uni-list-chat__container">
<view class="uni-list-chat__header-warp">
<view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
<image class="uni-list-chat__header-image" :src="avatar" mode="aspectFill"></image>
</view>
<!-- 头像组 -->
<view v-else class="uni-list-chat__header">
<view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
:style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
<image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
mode="aspectFill"></image>
</view>
</view>
</view>
<view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
</view>
<view class="uni-list-chat__content">
<view class="uni-list-chat__content-main">
<text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
<text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text>
</view>
<view class="uni-list-chat__content-extra">
<slot>
<text class="uni-list-chat__content-extra-text">{{ time }}</text>
<view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
</view>
</slot>
</view>
</view>
</view>
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
// 头像大小
const avatarWidth = 45;
/**
* ListChat 聊天列表
* @description 聊天列表,用于创建聊天类列表
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} title 标题
* @property {String} note 描述
* @property {Boolean} clickable = [true|false] 是否开启点击反馈，默认为false
* @property {String} badgeText 数字角标内容
* @property {String} badgePositon = [left|right] 角标位置，默认为 right
* @property {String} link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
* @value false 不开启
* @value navigateTo 同 uni.navigateTo()
* @value redirectTo 同 uni.redirectTo()
* @value reLaunch 同 uni.reLaunch()
* @value switchTab 同 uni.switchTab()
* @property {String | PageURIString} to 跳转目标页面
* @property {String} time 右侧时间显示
* @property {Boolean} avatarCircle = [true|false] 是否显示圆形头像，默认为false
* @property {String} avatar 头像地址，avatarCircle 不填时生效
* @property {Array} avatarList 头像组，格式为 [{url:''}]
* @event {Function} click 点击 uniListChat 触发事件
*/
export default {
name: 'UniListChat',
emits:['click'],
props: {
title: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
clickable: {
type: Boolean,
default: false
},
link: {
type: [Boolean, String],
default: false
},
to: {
type: String,
default: ''
},
badgeText: {
type: [String, Number],
default: ''
},
badgePositon: {
type: String,
default: 'right'
},
time: {
type: String,
default: ''
},
avatarCircle: {
type: Boolean,
default: false
},
avatar: {
type: String,
default: ''
},
avatarList: {
type: Array,
default () {
return [];
}
}
},
// inject: ['list'],
computed: {
isSingle() {
if (this.badgeText === 'dot') {
return 'uni-badge--dot';
} else {
const badgeText = this.badgeText.toString();
if (badgeText.length > 1) {
return 'uni-badge--complex';
} else {
return 'uni-badge--single';
}
}
},
computedAvatar() {
if (this.avatarList.length > 4) {
this.imageWidth = avatarWidth * 0.31;
return 'avatarItem--3';
} else if (this.avatarList.length > 1) {
this.imageWidth = avatarWidth * 0.47;
return 'avatarItem--2';
} else {
this.imageWidth = avatarWidth;
return 'avatarItem--1';
}
}
},
data() {
return {
isFirstChild: false,
border: true,
// avatarList: 3,
imageWidth: 50
};
},
mounted() {
this.list = this.getForm()
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true;
this.isFirstChild = true;
}
this.border = this.list.border;
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
onClick() {
if (this.to !== '') {
this.openPage();
return;
}
if (this.clickable || this.link) {
this.$emit('click', {
data: {}
});
}
},
openPage() {
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
this.pageApi(this.link);
} else {
this.pageApi('navigateTo');
}
},
pageApi(api) {
uni[api]({
url: this.to,
success: res => {
this.$emit('click', {
data: res
});
},
fail: err => {
this.$emit('click', {
data: err
});
console.error(err.errMsg);
}
});
}
}
};
</script>
<style lang="scss" scoped>
$uni-font-size-lg:16px;
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
$background-color: #fff;
$divide-line-color: #e5e5e5;
$avatar-width: 45px;
$avatar-border-radius: 5px;
$avatar-border-color: #eee;
$avatar-border-width: 1px;
$title-size: 16px;
$title-color: #3b4144;
$title-weight: normal;
$note-size: 12px;
$note-color: #999;
$note-weight: normal;
$right-text-size: 12px;
$right-text-color: #999;
$right-text-weight: normal;
$badge-left: 0px;
$badge-top: 0px;
$dot-width: 10px;
$dot-height: 10px;
$badge-size: 18px;
$badge-font: 12px;
$badge-color: #fff;
$badge-background-color: #ff5a5f;
$badge-space: 6px;
$hover: #f5f5f5;
.uni-list-chat {
font-size: $uni-font-size-lg;
position: relative;
flex-direction: column;
justify-content: space-between;
background-color: $background-color;
}
// .uni-list-chat--disabled {
// opacity: 0.3;
// }
.uni-list-chat--hover {
background-color: $hover;
}
.uni-list--border {
position: relative;
margin-left: $uni-spacing-row-lg;
/* #ifdef APP-PLUS */
border-top-color: $divide-line-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $divide-line-color;
}
.uni-list-item--first:after {
height: 0px;
}
/* #endif */
.uni-list-chat--first {
border-top-width: 0px;
}
.uni-ellipsis {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
}
.uni-ellipsis-2 {
/* #ifndef APP-NVUE */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* #endif */
/* #ifdef APP-NVUE */
lines: 2;
/* #endif */
}
.uni-list-chat__container {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex: 1;
padding: $uni-spacing-row-base $uni-spacing-row-lg;
position: relative;
overflow: hidden;
}
.uni-list-chat__header-warp {
position: relative;
}
.uni-list-chat__header {
/* #ifndef APP-NVUE */
display: flex;
align-content: center;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: $avatar-width;
height: $avatar-width;
/* #endif */
border-radius: $avatar-border-radius;
border-color: $avatar-border-color;
border-width: $avatar-border-width;
border-style: solid;
overflow: hidden;
}
.uni-list-chat__header-box {
/* #ifndef APP-PLUS */
box-sizing: border-box;
display: flex;
width: $avatar-width;
height: $avatar-width;
/* #endif */
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
overflow: hidden;
border-radius: 2px;
}
.uni-list-chat__header-image {
margin: 1px;
/* #ifdef APP-NVUE */
width: 50px;
height: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: $avatar-width;
height: $avatar-width;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list-chat__header-image {
display: block;
width: 100%;
height: 100%;
}
.avatarItem--1 {
width: 100%;
height: 100%;
}
.avatarItem--2 {
width: 47%;
height: 47%;
}
.avatarItem--3 {
width: 32%;
height: 32%;
}
/* #endif */
.header--circle {
border-radius: 50%;
}
.uni-list-chat__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex: 1;
overflow: hidden;
padding: 2px 0;
}
.uni-list-chat__content-main {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
padding-left: $uni-spacing-row-base;
flex: 1;
overflow: hidden;
}
.uni-list-chat__content-title {
font-size: $title-size;
color: $title-color;
font-weight: $title-weight;
overflow: hidden;
}
.uni-list-chat__content-note {
margin-top: 3px;
color: $note-color;
font-size: $note-size;
font-weight: $title-weight;
overflow: hidden;
}
.uni-list-chat__content-extra {
/* #ifndef APP-NVUE */
flex-shrink: 0;
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
margin-left: 5px;
}
.uni-list-chat__content-extra-text {
color: $right-text-color;
font-size: $right-text-size;
font-weight: $right-text-weight;
overflow: hidden;
}
.uni-list-chat__badge-pos {
position: absolute;
/* #ifdef APP-NVUE */
left: 55px;
top: 3px;
/* #endif */
/* #ifndef APP-NVUE */
left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
/* #endif */
}
.uni-list-chat__badge {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
border-radius: 100px;
background-color: $badge-background-color;
}
.uni-list-chat__badge-text {
color: $badge-color;
font-size: $badge-font;
}
.uni-badge--single {
/* #ifndef APP-NVUE */
// left: calc(#{$avatar-width} + 7px + #{$badge-left});
/* #endif */
width: $badge-size;
height: $badge-size;
}
.uni-badge--complex {
/* #ifdef APP-NVUE */
left: 50px;
/* #endif */
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
height: $badge-size;
padding: 0 $badge-space;
}
.uni-badge--dot {
/* #ifdef APP-NVUE */
left: 60px;
top: 6px;
/* #endif */
/* #ifndef APP-NVUE */
left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
/* #endif */
width: $dot-width;
height: $dot-height;
padding: 0;
}
.uni-list-chat--right {
/* #ifdef APP-NVUE */
left: 0;
/* #endif */
}
</style>

474
uni_modules/uni-list/components/uni-list-item/uni-list-item.vue
View File

@ -0,0 +1,474 @@
<template>
<!-- #ifdef APP-NVUE -->
<cell>
<!-- #endif -->
<view :class="{ 'uni-list-item--disabled': disabled }"
:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
class="uni-list-item" @click="onClick">
<view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
<view class="uni-list-item__container"
:class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }">
<slot name="header">
<view class="uni-list-item__header">
<view v-if="thumb" class="uni-list-item__icon">
<image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" />
</view>
<view v-else-if="showExtraIcon" class="uni-list-item__icon">
<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
</view>
</view>
</slot>
<slot name="body">
<view class="uni-list-item__content"
:class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
<text v-if="title" class="uni-list-item__content-title"
:class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text>
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
</view>
</slot>
<slot name="footer">
<view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra"
:class="{ 'flex--justify': direction === 'column' }">
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked"
@change="onSwitchChange" />
</view>
</slot>
</view>
<uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
/**
* ListItem 列表子组件
* @description 列表子组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} title 标题
* @property {String} note 描述
* @property {String} thumb 左侧缩略图，若thumb有值，则不会显示扩展图标
* @property {String} thumbSize = [lg|base|sm] 略缩图大小
* @value lg 大图
* @value base 一般
* @value sm 小图
* @property {String} badgeText 数字角标内容
* @property {String} badgeType 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
* @property {String} rightText 右侧文字内容
* @property {Boolean} disabled = [true|false] 是否禁用
* @property {Boolean} clickable = [true|false] 是否开启点击反馈
* @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
* @value navigateTo 同 uni.navigateTo()
* @value redirectTo 同 uni.redirectTo()
* @value reLaunch 同 uni.reLaunch()
* @value switchTab 同 uni.switchTab()
* @property {String | PageURIString} to 跳转目标页面
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
* @property {Object} extraIcon 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
* @property {String} direction = [row|column] 排版方向
* @value row 水平排列
* @value column 垂直排列
* @event {Function} click 点击 uniListItem 触发事件
* @event {Function} switchChange 点击切换 Switch 时触发
*/
export default {
name: 'UniListItem',
emits: ['click', 'switchChange'],
props: {
direction: {
type: String,
default: 'row'
},
title: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
ellipsis: {
type: [Number,String],
default: 0
},
disabled: {
type: [Boolean, String],
default: false
},
clickable: {
type: Boolean,
default: false
},
showArrow: {
type: [Boolean, String],
default: false
},
link: {
type: [Boolean, String],
default: false
},
to: {
type: String,
default: ''
},
showBadge: {
type: [Boolean, String],
default: false
},
showSwitch: {
type: [Boolean, String],
default: false
},
switchChecked: {
type: [Boolean, String],
default: false
},
badgeText: {
type: String,
default: ''
},
badgeType: {
type: String,
default: 'success'
},
rightText: {
type: String,
default: ''
},
thumb: {
type: String,
default: ''
},
thumbSize: {
type: String,
default: 'base'
},
showExtraIcon: {
type: [Boolean, String],
default: false
},
extraIcon: {
type: Object,
default () {
return {
type: 'contact',
color: '#000000',
size: 20
};
}
},
border: {
type: Boolean,
default: true
}
},
// inject: ['list'],
data() {
return {
isFirstChild: false
};
},
mounted() {
this.list = this.getForm()
// 判断是否存在 uni-list 组件
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true;
this.isFirstChild = true;
}
}
},
methods: {
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
onClick() {
if (this.to !== '') {
this.openPage();
return;
}
if (this.clickable || this.link) {
this.$emit('click', {
data: {}
});
}
},
onSwitchChange(e) {
this.$emit('switchChange', e.detail);
},
openPage() {
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
this.pageApi(this.link);
} else {
this.pageApi('navigateTo');
}
},
pageApi(api) {
let callback = {
url: this.to,
success: res => {
this.$emit('click', {
data: res
});
},
fail: err => {
this.$emit('click', {
data: err
});
}
}
switch (api) {
case 'navigateTo':
uni.navigateTo(callback)
break
case 'redirectTo':
uni.redirectTo(callback)
break
case 'reLaunch':
uni.reLaunch(callback)
break
case 'switchTab':
uni.switchTab(callback)
break
default:
uni.navigateTo(callback)
}
}
}
};
</script>
<style lang="scss">
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
$uni-spacing-col-lg: 12px;
$uni-spacing-row-lg: 15px;
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
$uni-border-color:#e5e5e5;
$uni-bg-color-hover:#f1f1f1;
$uni-text-color-grey:#999;
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
.uni-list-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
font-size: $uni-font-size-lg;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #fff;
flex-direction: row;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-list-item--disabled {
opacity: 0.3;
}
.uni-list-item--hover {
background-color: $uni-bg-color-hover;
}
.uni-list-item__container {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: $list-item-pd;
padding-left: $uni-spacing-row-lg;
flex: 1;
overflow: hidden;
// align-items: center;
}
.container--right {
padding-right: 0;
}
// .border--left {
// margin-left: $uni-spacing-row-lg;
// }
.uni-list--border {
position: absolute;
top: 0;
right: 0;
left: 0;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
}
/* #ifndef APP-NVUE */
.uni-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
.uni-list-item__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
padding-right: 8px;
flex: 1;
color: #3b4144;
// overflow: hidden;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.uni-list-item__content--center {
justify-content: center;
}
.uni-list-item__content-title {
font-size: $uni-font-size-base;
color: #3b4144;
overflow: hidden;
}
.uni-list-item__content-note {
margin-top: 6rpx;
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
overflow: hidden;
}
.uni-list-item__extra {
// width: 25%;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.uni-list-item__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.uni-list-item__icon {
margin-right: 18rpx;
flex-direction: row;
justify-content: center;
align-items: center;
}
.uni-list-item__icon-img {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
height: $uni-img-size-base;
width: $uni-img-size-base;
margin-right: 10px;
}
.uni-icon-wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
padding: 0 10px;
}
.flex--direction {
flex-direction: column;
/* #ifndef APP-NVUE */
align-items: initial;
/* #endif */
}
.flex--justify {
/* #ifndef APP-NVUE */
justify-content: initial;
/* #endif */
}
.uni-list--lg {
height: $uni-img-size-lg;
width: $uni-img-size-lg;
}
.uni-list--base {
height: $uni-img-size-base;
width: $uni-img-size-base;
}
.uni-list--sm {
height: $uni-img-size-sm;
width: $uni-img-size-sm;
}
.uni-list-item__extra-text {
color: $uni-text-color-grey;
font-size: $uni-font-size-sm;
}
.uni-ellipsis-1 {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
text-overflow:ellipsis;
/* #endif */
}
.uni-ellipsis-2 {
/* #ifndef APP-NVUE */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* #endif */
/* #ifdef APP-NVUE */
lines: 2;
text-overflow:ellipsis;
/* #endif */
}
</style>

106
uni_modules/uni-list/components/uni-list/uni-list - 副本.vue
View File

@ -0,0 +1,106 @@
<template>
<!-- #ifndef APP-NVUE -->
<view class="uni-list uni-border-top-bottom">
<view v-if="border" class="uni-list--border-top"></view>
<slot />
<view v-if="border" class="uni-list--border-bottom"></view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
<!-- #endif -->
</template>
<script>
/**
* List 列表
* @description 列表组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} border = [true|false] 标题
*/
export default {
name: 'uniList',
'mp-weixin': {
options: {
multipleSlots: false
}
},
props: {
enableBackToTop: {
type: [Boolean, String],
default: false
},
scrollY: {
type: [Boolean, String],
default: false
},
border: {
type: Boolean,
default: true
}
},
// provide() {
// return {
// list: this
// };
// },
created() {
this.firstChildAppend = false;
},
methods: {
loadMore(e) {
this.$emit('scrolltolower');
}
}
};
</script>
<style lang="scss" scoped>
.uni-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
background-color: $uni-bg-color;
position: relative;
flex-direction: column;
}
.uni-list--border {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: -1;
}
/* #ifndef APP-NVUE */
.uni-list--border-top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
z-index: 1;
}
.uni-list--border-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
</style>

108
uni_modules/uni-list/components/uni-list/uni-list.vue
View File

@ -0,0 +1,108 @@
<template>
<!-- #ifndef APP-NVUE -->
<view class="uni-list uni-border-top-bottom">
<view v-if="border" class="uni-list--border-top"></view>
<slot />
<view v-if="border" class="uni-list--border-bottom"></view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
<!-- #endif -->
</template>
<script>
/**
* List 列表
* @description 列表组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} border = [true|false] 标题
*/
export default {
name: 'uniList',
'mp-weixin': {
options: {
multipleSlots: false
}
},
props: {
enableBackToTop: {
type: [Boolean, String],
default: false
},
scrollY: {
type: [Boolean, String],
default: false
},
border: {
type: Boolean,
default: true
}
},
// provide() {
// return {
// list: this
// };
// },
created() {
this.firstChildAppend = false;
},
methods: {
loadMore(e) {
this.$emit('scrolltolower');
}
}
};
</script>
<style lang="scss" scoped>
$uni-bg-color:#ffffff;
$uni-border-color:#e5e5e5;
.uni-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
background-color: $uni-bg-color;
position: relative;
flex-direction: column;
}
.uni-list--border {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 0.5px;
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: -1;
}
/* #ifndef APP-NVUE */
.uni-list--border-top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
z-index: 1;
}
.uni-list--border-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uni-border-color;
}
/* #endif */
</style>

65
uni_modules/uni-list/components/uni-list/uni-refresh.vue
View File

@ -0,0 +1,65 @@
<template>
<!-- #ifdef APP-NVUE -->
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
<slot />
</refresh>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
<slot />
</view>
<!-- #endif -->
</template>
<script>
export default {
name: 'UniRefresh',
props: {
display: {
type: [String],
default: "hide"
}
},
data() {
return {
pulling: false
}
},
computed: {
isShow() {
if (this.display === "show" || this.pulling === true) {
return true;
}
return false;
}
},
created() {},
methods: {
onchange(value) {
this.pulling = value;
},
onrefresh(e) {
this.$emit("refresh", e);
},
onpullingdown(e) {
// #ifdef APP-NVUE
this.$emit("pullingdown", e);
// #endif
// #ifndef APP-NVUE
var detail = {
viewHeight: 90,
pullingDistance: e.height
}
this.$emit("pullingdown", detail);
// #endif
}
}
}
</script>
<style>
.uni-refresh {
height: 0;
overflow: hidden;
}
</style>

87
uni_modules/uni-list/components/uni-list/uni-refresh.wxs
View File

@ -0,0 +1,87 @@
var pullDown = {
threshold: 95,
maxHeight: 200,
callRefresh: 'onrefresh',
callPullingDown: 'onpullingdown',
refreshSelector: '.uni-refresh'
};
function ready(newValue, oldValue, ownerInstance, instance) {
var state = instance.getState()
state.canPullDown = newValue;
// console.log(newValue);
}
function touchStart(e, instance) {
var state = instance.getState();
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
if (!state.canPullDown) {
return
}
// console.log("touchStart");
state.height = 0;
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
state.refreshInstance.setStyle({
'height': 0
});
state.refreshInstance.callMethod("onchange", true);
}
function touchMove(e, ownerInstance) {
var instance = e.instance;
var state = instance.getState();
if (!state.canPullDown) {
return
}
var oldHeight = state.height;
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
var height = endY - state.touchStartY;
if (height > pullDown.maxHeight) {
return;
}
var refreshInstance = state.refreshInstance;
refreshInstance.setStyle({
'height': height + 'px'
});
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
state.height = height;
refreshInstance.callMethod(pullDown.callPullingDown, {
height: height
});
}
function touchEnd(e, ownerInstance) {
var state = e.instance.getState();
if (!state.canPullDown) {
return
}
state.refreshInstance.callMethod("onchange", false);
var refreshInstance = state.refreshInstance;
if (state.height > pullDown.threshold) {
refreshInstance.callMethod(pullDown.callRefresh);
return;
}
refreshInstance.setStyle({
'height': 0
});
}
function propObserver(newValue, oldValue, instance) {
pullDown = newValue;
}
module.exports = {
touchmove: touchMove,
touchstart: touchStart,
touchend: touchEnd,
propObserver: propObserver
}

91
uni_modules/uni-list/package.json
View File

@ -0,0 +1,91 @@
{
"id": "uni-list",
"displayName": "uni-list 列表",
"version": "1.2.0",
"description": "List 组件 ，帮助使用者快速构建列表。",
"keywords": [
"",
"uni-ui",
"uniui",
"列表",
"",
"list"
],
"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-badge",
"uni-icons"
],
"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"
}
}
}
}
}

347
uni_modules/uni-list/readme.md
View File

@ -0,0 +1,347 @@
## List 列表
> **组件名：uni-list**
> 代码块： `uList`、`uListItem`
> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。
内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。
下文均有样例给出。
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
> - `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item`
> - 只有开启点击反馈后，会有点击选中效果
> - 使用插槽时，可以完全自定义内容
> - note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义
> - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli`
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 基本用法
- 设置 `title` 属性，可以显示列表标题
- 设置 `disabled` 属性，可以禁用当前项
```html
<uni-list>
<uni-list-item title="列表文字" ></uni-list-item>
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>
```
### 多行内容显示
- 设置 `note` 属性 ，可以在第二行显示描述文本信息
```html
<uni-list>
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list>
```
### 右侧显示角标、switch
- 设置 `show-badge` 属性 ，可以显示角标内容
- 设置 `show-switch` 属性，可以显示 switch 开关
```html
<uni-list>
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
</uni-list>
```
### 左侧显示略缩图、图标
- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图
- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标
```html
<uni-list>
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="右侧文字"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>
```
### 开启点击反馈和右侧箭头
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
```html
<uni-list>
<uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item>
<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>
```
### 聊天列表示例
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
- 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
- 设置 `to` 属性，可以跳转页面
- `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示
- `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效
- 可以通过默认插槽自定义列表右侧内容
```html
<uni-list>
<uni-list :border="true">
<!-- 显示圆形头像 -->
<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
<!-- 右侧带角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
<!-- 头像显示圆点 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 头像显示角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
<!-- 显示多头像 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 自定义右侧内容 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
<view class="chat-custom-right">
<text class="chat-custom-text">刚刚</text>
<!-- 需要使用 uni-icons 请自行引入 -->
<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
</view>
</uni-list-chat>
</uni-list>
</uni-list>
```
```javascript
export default {
components: {},
data() {
return {
avatarList: [{
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}]
}
}
}
```
```css
.chat-custom-right {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.chat-custom-text {
font-size: 12px;
color: #999;
}
```
## API
### List Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
border |Boolean |true | 是否显示边框
### ListItem Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
title |String |- | 标题
note |String |- | 描述
ellipsis |Number |0 | title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】
thumb |String |- | 左侧缩略图，若thumb有值，则不会显示扩展图标
thumbSize |String |medium | 略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;
showBadge |Boolean |false | 是否显示数字角标
badgeText |String |- | 数字角标内容
badgeType |String |- | 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
rightText |String |- | 右侧文字内容
disabled |Boolean |false | 是否禁用
showArrow |Boolean |true | 是否显示箭头图标
link |String |navigateTo | 新页面跳转方式，可选值见下表
to |String |- | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功
clickable |Boolean |false | 是否开启点击反馈
showSwitch |Boolean |false | 是否显示Switch
switchChecked |Boolean |false | Switch是否被选中
showExtraIcon |Boolean |false | 左侧是否显示扩展图标
extraIcon |Object |- | 扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)
direction | String |row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制
#### Link Options
属性名 | 说明
:-: | :-:
navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab()
### ListItem Events
事件称名 |说明 |返回参数
:-: |:-: |:-:
click |点击 uniListItem 触发事件，需开启点击反馈 |-
switchChange |点击切换 Switch 时触发，需显示 switch |e={value:checked}
### ListItem Slots
名称 | 说明
:-: | :-:
header | 左/上内容插槽，可完全自定义默认显示
body | 中间内容插槽，可完全自定义中间内容
footer | 右/下内容插槽，可完全自定义右侧内容
> **通过插槽扩展**
> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现
> 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。
> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer`
> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分
> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分
> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
**示例**
```html
<uni-list>
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
<template slot="header">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
<uni-list-item>
<!-- 自定义 header -->
<view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
<!-- 自定义 body -->
<text slot="body" class="slot-box slot-text">自定义插槽</text>
<!-- 自定义 footer-->
<template slot="footer">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template>
</uni-list-item>
</uni-list>
```
### ListItemChat Props
属性名 |类型 |默认值 | 说明
:-: |:-: |:-: | :-:
title |String |- | 标题
note |String |- | 描述
clickable |Boolean |false | 是否开启点击反馈
badgeText |String |- | 数字角标内容，设置为 `dot` 将显示圆点
badgePositon |String |right | 角标位置
link |String |navigateTo | 是否展示右侧箭头并开启点击反馈，可选值见下表
clickable |Boolean |false | 是否开启点击反馈
to |String |- | 跳转页面地址，如填写此属性，click 会返回页面是否跳转成功
time |String |- | 右侧时间显示
avatarCircle |Boolean |false | 是否显示圆形头像
avatar |String |- | 头像地址，avatarCircle 不填时生效
avatarList |Array |- | 头像组，格式为 [{url:''}]
#### Link Options
属性名 | 说明
:-: | :-:
navigateTo | 同 uni.navigateTo()
redirectTo | 同 uni.reLaunch()
reLaunch | 同 uni.reLaunch()
switchTab | 同 uni.switchTab()
### ListItemChat Slots
名称 | 说明
:- | :-
default | 自定义列表右侧内容（包括时间和角标显示）
### ListItemChat Events
事件称名 | 说明 | 返回参数
:-: | :-: | :-:
@click | 点击 uniListChat 触发事件 | {data:{}} ，如有 to 属性，会返回页面跳转信息
## 基于uni-list扩展的页面模板
通过扩展插槽，可实现多种常见样式的列表
**新闻列表类**
1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
**商品列表类**
1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list)
Write Preview
Loading…
Cancel
Save