插件地址
TextEllipsis插件:TextEllipsis插件地址
imageAdaptation插件:imageAdaptation插件
效果图
VUE
<template>
<view>
<uni-navbar fixed="true" title="文本缩略显示&img自适应" backgroundColor="#4683ff" color="#ffffff">
<view slot='left' class="pd-l-20 nav_left" @click="navBack()">
<image src="/static/images/back2.png"></image>
</view>
</uni-navbar>
<view class="mg-t-20">
<view class="pd-l-30 pd-tb-7 border font-34 bold">文本缩略显示</view>
<view class="pd-30">
<text-ellipsis :text='text'></text-ellipsis>
</view>
</view>
<view class="mg-t-20">
<view class="pd-l-30 border font-34 bold">img自适应</view>
<view class="pd-20">
<view class="c-99 font-30">一张图片</view>
<imageAdaptation :imgList="imgLayout1"></imageAdaptation>
<view class="c-99 font-30 mg-t-20">两张图片</view>
<imageAdaptation :imgList="imgLayout2"></imageAdaptation>
<view class="c-99 font-30 mg-t-20">多张图片</view>
<imageAdaptation :imgList="imgList"></imageAdaptation>
</view>
</view>
</view>
</template>
<script>
import TextEllipsis from "@/components/text-ellipsis/text-ellipsis";
import imageAdaptation from "@/components/images-adaptation/imageAdaptation";
export default {
components: { TextEllipsis, imageAdaptation },
data() {
return {
text: '《火影忍者疾风传》根据漫画《火影忍者》的第二部(即单行本28卷开始的部分)改编而成,在《火影忍者》动画第一期结束后,于2007年2月15日开始在东京电视台播出,2017年3月23日正式完结。标题中的“疾风”则是主角鸣人的象征,既代表了他在作品中所拥有的“风”查克拉属性,也代表他如同疾风般勇往直前的性格',
imgList: [
'https://wx1.sinaimg.cn/orj360/006XkLK8ly1gsbt0r9uzkj31ck1ww1l2.jpg',
'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsr1qca7kaj31ck1ww7wh.jpg',
'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsz4c61nysj31ck1ww000.jpg',
'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gt71b3qivqj31ck1ww7ju.jpg',
'https://wx1.sinaimg.cn/orj360/c6d57fcaly1gtwxviygtmj20u016kdn6.jpg',
'https://wx1.sinaimg.cn/orj360/006XkLK8ly1gsb6xkv22sj31ck1ww7wk.jpg',
'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsqr8xv7b4j31ck1ww4qp.jpg',
'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsi71c5qs0j31ck1ww7wi.jpg',
'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gtg6nf1wmij61ck1ww7wh02.jpg'
],
imgLayout1: [ 'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gs76nnncnij31ck1wwnpe.jpg' ],
imgLayout2: [
'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gsi77s573wj31ck1wwhdv.jpg',
'https://wx1.sinaimg.cn/orj360/006XkLK8gy1gskwdqefe8j31ck1wwqv5.jpg',
],
};
},
methods: {
}
}
</script>
<style lang="scss">
.border{
border-left: 10rpx solid #4683ff;
}
</style>