小程序列表超出范围可展开收起功能

由于设计项目的页面，一个列表里面文字太过于长，也影响页面美观，所以不少软件都有展开收起这个小功能。

　　1.文本超出设置行数后隐藏，然后显示省略号...

　　2.可点击展开看隐藏的文本内容，也可以收起。

　　如图：

　　wxml

<scroll-view class='page'>
  <!-- 列表 -->
  <view class='list' wx:for='{{DataSource}}' wx:key="index">
    <!-- 内容 start-->
    <view class="user-content-view {{item.isF?'hide':'show'}}">
      <text class="user-content">{{item.content}}</text>
    </view>
      <!-- 内容 end-->

    <!-- 展开 收起 strat-->
    <view bindtap="change" class="state" data-index="{{index}}">{{item.isF?'展开':'收起'}}</view>
    <!-- 展开 收起  end -->
  </view>

</scroll-view>

　　wxss

.page{
  margin-top: 50rpx;
}


/* 列表 */
.list{
  background: white;
  margin-bottom: 1px;
   border-bottom: 1px solid whitesmoke;
  /* border-top: 1px solid whitesmoke;  */
}
.user-content-view{
  text-align: center;
  display: -webkit-box;  /*关键属性（必须有的）  */
  -webkit-box-orient: vertical;   /*规定子元素的排列方向 */
  -webkit-line-clamp:3; /*行数*/
  /* 实现多余的文字隐藏并用省略号来代表被隐藏的文字    */
  overflow: hidden;
  text-overflow:ellipsis; 
  
}
.user-content{
  /* display: flex; */
  font-size: 18px;
  /* line-height: 50rpx;
  margin-left: 10rpx;
 */
}

/* 展开 收起 */
.state{
  width: 96%;
  text-align: right;
  color: rgb(88, 103, 138);
  margin: 10rpx 0rpx; 
  font-size: 35rpx;
  font-weight: bold;
}

.hide{
  display: -webkit-box;
}

.show{
  display: block
}

　　我把展开收起的状态放到数组里面，按道路可以不用放在数组里面的，这样不灵活使用。

// pages/CircleFriends/CircleFriends.js
var app = getApp()
var that

Page({
  /**
   * 页面的初始数据
   */
  data: {

    DataSource: [
      {
        isF: true,
        content: '掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。',
      },
      {
        isF: true,
        content: '前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。',
      }
    ],
  },



  //展开  收起
  change: function (e) {
    var that = this;
    var DataSource = that.data.DataSource;
    var row = DataSource[e.currentTarget.dataset.index];
    console.log("**********:" + row)
    row.isF = !row.isF;
    that.setData({
      DataSource: DataSource,
    })
  },

})

小程序 列表超出范围可展开收起功能

猜你喜欢

小程序列表超出范围可展开收起功能