平时工作中经常遇到开始只显示几行文字,点击按钮,可以查看全部文字内容。

简单写了个,代码如下:

<view class="item_content f28 gray">
<view class="{{isShow?'max3':''}}">
一个天津市公司,和公司1签了一份企业整体转让的协议,天津公司没有履行协议,故意不转让了。一个天津市公司,和公司1签了一份企业整体转让的协议,天津公司没有履行协议,故意不转让了。天津公司和我们另一个公司2有买卖天津公司和我们另一个公司2有买卖
</view>
<view class="flex_row more" bindtap="clickMore" hidden="{{!isShow}}">
<text class="iconfont icon-xiajiantou"></text>
<text>查看全部</text>
</view>
</view>

样式:

.item_content{padding:25rpx 25rpx;border-bottom: 1px solid #D4D4D4;}
.max3{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp:;-webkit-box-orient: vertical;}
.more{margin-top:15rpx;color:#CCCCCC;font-size: 28rpx;}

js

data: {
isShow:true,
}, clickMore:function(){
if (this.data.isShow){
this.setData({
isShow: false,
})
}
},

微信小程序---查看更多的显示与隐藏的更多相关文章

  1. 微信小程序中视频的显示与隐藏

    在微信小程序中实现视频的播放与暂停 需求: 视频列表中只能有一个视频在播放 点击视频实现播放与暂停功能 加载完成显示图片,点击后变为视频播放 从上次播放的位置进行播放 思路: 定义一个标记变量,控制视 ...

  2. 【微信小程序】 wx:if 与 hidden(隐藏元素)区别

    wx:if 与 hidden 都可以控制微信小程序中元素的显示与否. 区别: wx:if 是遇 true 显示,hidden 是遇 false 显示. wx:if 在隐藏的时候不渲染,而 hidden ...

  3. 转载:【微信小程序】 wx:if 与 hidden(隐藏元素)区别

    条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里 ...

  4. 微信小程序开发--背景图显示

    这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image ...

  5. 微信小程序列表项滑动显示删除按钮

    微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来 ...

  6. 【微信小程序】tabBar的显示问题

    tabBar不显示 在app.json中配置了4个页面,在tabBar的list中随意写了两个页面,编译后发现不能显示tabBar. { "pages": [ "page ...

  7. 微信小程序open-data userAvatarUrl圆角显示

    从年初开始,打开小程序,工具栏都会弹出这个提醒: 也就是,默认不弹出授权询问框,默认获取不到用户信息(头像.昵称等)! 如果你需要用到这个接口,可以尝试以下方法: 1.用 button 组件,将属性名 ...

  8. 微信小程序图片宽100%显示并且不变形

    <view class="meiti" style="background-color:red;"> <image src="htt ...

  9. 微信小程序判断按钮是否显示,或者隐藏

    js中: onLoad:function(options) { this.setData({ orderstate:'待送检' }) },   WXML中: <view wx:if=" ...

随机推荐

  1. 玩深度学习选哪块英伟达 GPU?有性价比排名还不够!

    本文來源地址:https://www.leiphone.com/news/201705/uo3MgYrFxgdyTRGR.html 与“传统” AI 算法相比,深度学习(DL)的计算性能要求,可以说完 ...

  2. linux实操_权限管理

    rwx权限详解 作用到文件: [r]代表可读(read):可以读取,查看 [w]代表可写(write):可以修改,但是不代表可以删除文件,删除一个文件的前提条件时对该文件所在的目录有写权限,才能删除该 ...

  3. 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...

  4. adb端口被自己占用,或者用adb连不上模拟器最终解决办法

    1.下载360手机助手 2.找一个安卓手机连接上电脑,安装驱动 3.手机助手可以连接手机 4.拔掉手机开启模拟器以后都可以用adb连接模拟器了 找到占用端口的程序,禁止其运行 1.首先找到占用5037 ...

  5. soapui如何发送xml格式的字符串

    一个服务需要的xml格式的字符串参数,用soapUI传递参数时要这样写: <![CDATA[<?xml version="1.0" encoding="UTF ...

  6. Onpaint()函数中绘图出现问题:当多次进入onpaint()发现次数达到一定程度就会出现窗口不能再重绘导致窗口内容损坏的现象

    我在一个按钮中调用sendmessage(wm_paint,0,0)达到36以上时,当最小化窗口然后再恢复就会发现窗口出现错误信息,而且窗口界面内容混乱不完整.原来以为是使用sleep()函数导致的问 ...

  7. redis之持久化RDB与AOF

    redis数据持久化 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失,为了解决这个问题,Redis提供了两种持久化的方案,将内存中的数据保存到磁盘中,避免数据的丢失. RDB持 ...

  8. springboot工程打成war包

    1.将pom.xml中默认的jar修改为war. <packaging>war</packaging> 2.排除SpringBoot内置的Tomcat容器. <depen ...

  9. FOFA 批量采集url 图形化界面编写

    这是脚本 # coding:utf- import requests,re import time import sys import getopt import base64 guizhe='' s ...

  10. ICEM—奇葩

    原视频下载地址:https://yunpan.cn/cSsbI89zP9Z4K  访问密码 a287