vue长文本点击展开收起
点击展开收起
<template><view class="c"><view class="Cmain"><view class="home" v-cloak><view class="home-title">常见疾病</view><view class="menu" v-for="(item, index) in medicalList" :key="index" ><view class="main" ><!-- 疾病标题 --><view class="title" @click="getShow(item)"><image src="../../static/icon/ill.png" mode="widthFix"></image>{{item.title}}</view><!-- 疾病症状、原因、基本处理方法 --><view class="dropdown" v-show = "item.show"> <view class="text">症状：<view class="tt">{{item.symptom}}</view></view><view class="text">原因：<view class="tt">{{item.reason}}</view></view><view class="text">基本处理方法：<view class="tt">{{item.processingMethod}}</view></view></view></view></view></view></view></view></template><script>export default {data() {return {show:false,medicalList:[{title:'1.腹泻',symptom:'小肠腹泻的表现是粪便量增多以及排便频率轻微增加，每天大概有3到5次，宠物排便毫不费力。狗狗可能还会出现呕吐以及体重减轻的问题。通常还伴有气体产生过多，有时我们甚至还可以听到气在肚子里的隆隆声。如果粪便里有血，说明它经过肠道消化并呈黑色。因为腹泻，狗狗无法正常吸收营养物质，所以就会导致它们的体重会减轻，毛发干枯易断。动物体内有一种微小的蛋白叫做白蛋白，它的作用就像海绵，能够使正常量的水分保存在血管中。当发生腹泻时，白蛋白随着粪便排出体外而大量丢失，血中的白蛋白减少，使水分从血管中渗出而积聚在其他部位，那么就会发展成腿部水肿，胸水以及腹水。大肠腹泻包括结肠和直肠疾病，能引起宠物每天都有少量的软便排出，通常每天超过5次，宠物排便有些困难。如果粪便中有血，颜色为红色。大便可能有粘糊糊的粘液。宠物不常呕吐而且体重也不会减轻。',reason:'消化不良，着凉，菌群不平衡，感染病毒，暴饮暴食、换粮这些情况都可能导致狗狗腹泻，尤其是幼犬',processingMethod:'禁食12-24小时，给予肠道充分休息;用益生菌调节肠道的菌群平衡;到药房买思密达喂食，起到物理性的止泻作用;注意保暖，防止受寒。若做了以上处理后，狗狗还没好转，须立即送医。',show:false},{title:'2.异食癖',symptom:'狗狗吃一些异常的物品，如泥土，墙皮，石头等统称为异食癖',reason:'一般来说异食癖只要由于缺乏微量元素一起',processingMethod:'可通过营养补充来调节。',show:false},{title:'3.感冒',symptom:'精神不好，打蔫，喜欢趴着;有流水样的鼻涕，打喷嚏和咳嗽;眼结膜充血，流泪，食欲不振;体温升高，一般为39-40℃',reason:'受凉，多见于洗澡后，天气变化，长期吹空调;病毒感染;被传染感冒病毒',processingMethod:'抗病毒滴剂、紫雏菊花粉、免疫多糖膏、抗病毒冲剂、板蓝根;促进血液循环，保暖，热敷肚子。若不见好妆，及时就医。',show:false},{title:'4.严重掉毛',symptom:'大量掉毛',reason:'幼犬更换胎毛会引起掉毛，季节性换毛时也会掉毛，怀孕生产因为激素分泌，可能会引起母狗的大量掉毛',processingMethod:'有些不正常的情况也会导致大量掉毛。同时，皮肤过于干燥，如饮食不均衡，未摄入足够的油脂，洗浴方式、洗浴用品不当等均会导致狗狗皮肤干燥，掉皮屑，甚至掉毛。患有皮肤病，如感染了细菌、真菌以及螨虫，也会引起掉毛，这种掉毛需要送医院检查确诊皮肤病。',show:false},{title:'5.呕吐',symptom:'狗狗容易呕吐跟其身体特点有关系：胃部与地面平行，没有重力的束缚，很容易呕。',reason:'剧烈的运动后或者情绪激动时，会因食物刺激(吃太快、过凉、过硬、采食过多)后呕吐，属于正常生理现象。犬肠道的益生菌数量、种类与人类相比较少，不能适应食物变化，也容易引起食物不适用导致的呕吐。生病状态(如患有胃肠炎、寄生虫)也会引发呕吐。',processingMethod:'少吃多餐，饭后不能剧烈运动，及时补充益生菌，不喝牛奶，及时驱虫，对照症状找到呕吐的病因及时用药或就医。',show:false},]};},methods:{// 点击标题下拉展示getShow(item){// console.log(item)item.show=!item.show;},goPage(url){uni.navigateTo({url})},},}</script><style lang="scss">/* body, main::before{background: url("https://lupic.cdn.bcebos.com/20191203/3016047015_14.jpg") 0 / cover fixed;} */body,.Cmain::before{background: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1818218419,1317735897&fm=26&gp=0.jpg") 0 / cover fixed;}.Cmain{width: 90%;min-height: 90vh;line-height: 2;position: relative;margin:30upx 5% ;padding:30upx 0;border-radius: 20upx;background: rgba(184, 170, 163, .7);box-shadow: 3upx 3upx 6upx 3upx rgba(0, 0, 0, .3);overflow: hidden;.home {.home-title {display: flex;align-items: center;justify-content: center;color: #fff;line-height: 50upx;font-size: 35upx;font-weight: 500;padding-bottom: 15upx;}.menu{border-radius:80upx;border: 1px solid #e8e6e1;padding:30upx;margin: 50upx 30upx;.title {display: flex;flex-direction: row;color: #fff;line-height: 50upx;font-size: 33upx;image {width:50upx;padding-right: 30upx;}}.dropdown{.text{margin: 10upx auto;color: #707070;.tt {color: #333;font-size: 28upx;text-indent: 2em;margin:5upx auto;}}} }}}.Cmain::before{content: '';position: absolute;top: 0; bottom: 0;left: 0; right: 0;filter: blur(20upx);z-index: -1;margin: -30upx;}</style>
另一种是：
<template><view><view class="Express" ><view class="info"><view :class="{hide:!iSinfo}">{{text}}<text @tap="showinfo" v-if="iSinfo" class="hidebtn">收起</text> </view><text @tap="showinfo" v-if="!iSinfo">展开</text></view></view></view></template><script>export default {data() {return {iSinfo: false,text:'禁食12-24小时，给予肠道充分休息;用益生菌调节肠道的菌群平衡;到药房买思密达喂食，起到物理性的止泻作用;注意保暖，防止受寒。若做了以上处理后，狗狗还没好转，须立即送医。'}},methods: {showinfo() {this.iSinfo = !this.iSinfo}}}</script><style lang="scss">page {background-color: #fff;}.Express {display: flex;flex-direction: column;background-color: #fff;padding: 30upx;position: relative;.info {display: flex;flex-direction: column;view {text-align:justify ;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(102, 102, 102, 1);word-break: break-word; //换行模式background-color: #fff;}text {width: 70px;font-size: 14px;display: flex;justify-content: flex-end;align-items: center;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);color: #000000;position: absolute;bottom: 30upx;right: 30upx;}}}.hidebtn {display: flex;flex: 1;justify-content: flex-end;color: #000000;font-size: 14px;}.hide {word-break: break-word; //换行模式overflow: hidden;text-overflow: ellipsis; //修剪文字display: -webkit-box;-webkit-line-clamp: 1; //此处为上限行数-webkit-box-orient: vertical;}</style>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！