uni-app文字展开

效果：

实现思路：三元表达式

        通过设置变量的true或false在页面上显示对应箭头以及标签设置样式

html：

<!-- 文字 -->
				<div>
					<div class="writing" :class="show2==false? 'writing2':''">
						故事讲述唐长安—天......方式.
					</div>
					<div>
						<div v-show="show2" @click="writing2">
							<image src="../../static/bottomarrow.png"></image>
						</div>
						<div v-show="!show2" @click="writing2s">
							<image src="../../static/toparrow.png"></image>
						</div>
					</div>
				</div>

 js:

export default {
		data() {
			return {
				show: true, //顶部显示变量
				show2: true, //箭头图标
			}
		},
		methods: {
			
			
			// 点击向下箭头
			writing2: function() {
				this.show2=false

			},
			// 点击向上箭头
			writing2s: function() {
				this.show2=true
			},
		}
	}

 

 css:

.writing{
		width: 92%;
		margin-left: 4%;
		height: 85px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}
	.writing2{
		width: 92%;
		margin-left: 4%;
		height: 170px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 50;
		overflow: hidden;
	}

 变量命名真的累了

标签：文字,box,app,箭头,webkit,uni,clamp,true,show2
来源： https://blog.csdn.net/qq_55654116/article/details/121063171