通用列表

样式介绍

为了列表布局更灵活、更高效，我们没有将其封装为组件而是提供了列表布局样式，这样您可以在开发过程中更便捷地组合出符合您项目要求的列表。

内置样式

.ux-list-items 列表项目
.ux-list-icon 列表图标
.ux-list-image 列表图片
.ux-list-body 列表主体
.ux-list-title 列表标题
.ux-list-one-line 单行文本
.ux-list-title-text 列表标题文本
.ux-list-title-desc, .ux-list-body-desc 列表描述
.ux-list-arrow-right 箭头样式

演示代码

<template>
	<scroll-view class="ux-flex1 ux-page-color">
		<text class="ux-h6 ux-color-grey ux-margin">布局演示</text>
		<view class="ux-bg-white">
			<view class="ux-list-items" hover-class="ux-tap">
				<view class="ux-list-image ux-relative">
					<image class="ux-list-image" 
					mode="aspectFill" 
					src="@/static/uxui/images/200x200.png"></image>
					<view class="ux-badge-point"></view>
				</view>
				<view class="ux-list-body ux-border-b">
					<view class="ux-list-title">
						<text 
						class="ux-list-title-text ux-primary-text">标题信息</text>
						<text 
						class="ux-list-title-desc ux-color-grey2">08/18/2020</text>
					</view>
					<text 
					class="ux-list-body-desc ux-color-grey">描述信息</text>
				</view>
				<text 
				class="ux-list-arrow-right ux-icons ux-color-grey3">{{"\ue601"}}</text>
			</view>
			<view class="ux-list-items" hover-class="ux-tap">
				<text 
				class="ux-list-icon ux-icons ux-color-red">{{"\ue6cf"}}</text>
				<view 
				class="ux-list-body ux-border-b">
					<view class="ux-list-title">
						<text 
						class="ux-list-title-text ux-primary-text">标题信息</text>
						<text 
						class="ux-list-title-desc ux-color-grey2">08/18/2020</text>
					</view>
					<text 
					class="ux-list-body-desc ux-color-grey">描述信息</text>
				</view>
				<text
				class="ux-list-arrow-right ux-icons ux-color-grey3">{{"\ue601"}}</text>
			</view>
			<view class="ux-list-items" hover-class="ux-tap">
				<text 
				class="ux-list-icon ux-icons ux-color-green">{{"\ue666"}}</text>
				<view class="ux-list-body ux-border-b">
					<view class="ux-list-title">
						<text 
						class="ux-list-title-text ux-list-one-line ux-primary-text">单行模式</text>
						<text 
						class="ux-list-title-desc ux-color-grey2">08/18/2020</text>
					</view>
				</view>
				<text
				class="ux-list-arrow-right ux-icons ux-color-grey3">{{"\ue601"}}</text>
			</view>
			<view class="ux-list-items" hover-class="ux-tap">
				<text class="ux-list-icon ux-icons ux-color-blue">{{"\ue61f"}}</text>
				<view class="ux-list-body">
					<view class="ux-list-title">
						<text 
						class="ux-list-title-text ux-primary-text ux-list-one-line ux-ellipsis" 
						style="width:600rpx;">标题文本文字很多，溢出省略,标题文本文字很多，溢出省略</text>
					</view>
				</view>
				<text
				class="ux-list-arrow-right ux-icons ux-color-grey3">{{"\ue601"}}</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>