微信小程序列表项数据详情折叠效果

古城微笑少年丶 2021-09-01 09:26 296阅读 0赞

# 效果图 #

![在这里插入图片描述][20200815155530191.gif_pic_left]

# WXML文件 #

<view class="container">
      <view class="wrap">
        <view class="item" wx:for="{ {list}}" wx:key="index">
          <view class="top">
            <view class="img">
              <image src="{ {item.img[0]}}">
              </image>
            </view>
            <view class="desc">
              <view class="title">{
       {item.name}}</view>
              <view class="subtitle">{
       {item.subtitle}}</view>
              <view class="type">{
       {item.type}}</view>
              <view class="duration">{
       {item.producePlace}} / {
       {item.duration}}分钟</view>
              <view class="opentime">{
       {item.releaseDate}} {
       {item.releasePlace}}</view>
              <view class="btn-group">
                <button class="btn" hover-class="btnhover">想看</button>
                <button class="btn" hover-class="btnhover">评分</button>
              </view>
            </view>
          </view>
          <view class="btm">
            <view class="tit-wrap" wx:if="{ {item.plot}}" bindtap="showPlot" data-index="{ {index}}">
              <view class="txt">剧情简介</view>
              <view class="arrow { {item.flag ? 'active' : ''}}"></view>
            </view>
            <view class="plot" hidden="{ {!item.flag}}">{
       {item.plot}}</view>
          </view>
        </view>
      </view>
    </view>

# JS文件 #

//获取应用实例
    const app = getApp()
    
    Page({ 
      data: { 
        list: [
          { 
            name: '唐人街探案3',
            subtitle: 'Detective Chinatown 3',
            type: '喜剧 悬疑',
            duration: '136',
            producePlace: '中国大陆',
            releaseDate: '2020-10-01',
            releasePlace: '中国大陆上映',
            img: ['https://p0.meituan.net/movie/b0e0d6ce9914f37e7f9f6ade13e096342721150.jpg@464w_644h_1e_1c'],
            plot: '继曼谷、纽约之后，东京再出大案。唐人街神探唐仁（王宝强 饰）、秦风（刘昊然 饰）受侦探野田昊（妻夫木聪 饰）的邀请前往破案。“CRIMASTER世界侦探排行榜”中的侦探们闻讯后也齐聚东京，加入挑战，而排名第一Q的现身，让这个大案更加扑朔迷离，一场亚洲最强神探之间的较量即将爆笑展开……'
          },
          { 
            name: '我在时间尽头等你',
            subtitle: 'Love You Forever',
            type: '爱情 奇幻 喜剧',
            duration: '115',
            producePlace: '中国大陆',
            releaseDate: '2020-08-25',
            releasePlace: '中国大陆上映',
            img: ['https://p0.meituan.net/moviemachine/7e6118993dbf0f304ac1dad4667fddda207318.jpg@218w_300h_1e_1c'],
            plot: '林格（李鸿其 饰）一次次重启时空，只为与恋人邱倩（李一桐 饰）再次相遇。一生只爱一个人，希望开头是你，结尾也是你。2020年七夕最深情的告白: 我在时间尽头等你。'
          },
          { 
            name: '我和我的家乡',
            subtitle: 'My Hometown And I',
            type: '剧情 喜剧',
            duration: '120',
            producePlace: '中国大陆',
            releaseDate: '2020-10-01',
            releasePlace: '中国大陆上映',
            img: ['https://p0.meituan.net/movie/3e9c5b91940cd5c75a12916e66528a404269063.jpg@464w_644h_1e_1c'],
            plot: ''
          },
          { 
            name: '八佰',
            subtitle: 'The Eight Hundred',
            type: '剧情 战争 历史',
            duration: '147',
            producePlace: '中国大陆',
            releaseDate: '2020-08-21',
            releasePlace: '中国大陆上映',
            img: ['https://p1.meituan.net/moviemachine/a448ca6a5f4dafb88067722303ca0cfd96002.jpg@464w_644h_1e_1c'],
            plot: '1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。'
          },
          { 
            name: '姜子牙',
            subtitle: 'JIANG ZIYA：Legend Of Deification',
            type: '动画 动作 冒险',
            duration: '110',
            producePlace: '中国大陆',
            releaseDate: '2020-10-01',
            releasePlace: '中国大陆上映',
            img: ['https://p0.meituan.net/movie/3dc44919f0917b5823c867813f29fba42625689.jpg@464w_644h_1e_1c'],
            plot: '昆仑弟子姜子牙（郑希 配音）率领众神伐纣，赢得封神大战胜利。即将受封成为众神之长的他，却因一时过失引得昆仑大乱，从此被贬北海，为世人所唾弃。十年后，因一个契机，姜子牙踏上重回昆仑的旅途。在战后的废墟之上，他重新找到自我，也洞悉了十年前的一切真相。'
          },
          { 
            name: '小妇人',
            subtitle: 'Little Women',
            type: '爱情 剧情',
            duration: '135',
            producePlace: '美国',
            releaseDate: '2020-08-25',
            releasePlace: '中国大陆上映',
            img: ['https://p0.meituan.net/movie/cdb164c203fc0c2465278ddd165e91c84503798.jpg@464w_644h_1e_1c'],
            plot: '马奇夫人和四个多才多艺但性格各异的女儿一起过着平凡又温馨的生活。梅格贤惠温柔，是为爱痴狂的浪漫主义者；贝丝聪慧娴静，擅长钢琴；艾米年纪最小，有漂亮的外表和现实的头脑；而最特立独行的是乔，她有些男孩子气，热爱写作，在女孩都以嫁人为目标的年代，她立志成为一名独立女性。富有又帅气的青年劳里和乔青梅竹马两小无猜，对乔一见钟情，但乔面对劳里的表白却心烦意乱，决定独自前往纽约追求写作事业。经历了现实的洗礼后，乔逐渐明白了自己对于劳里的心意，却发现劳里即将迎娶妹妹艾米……'
          }
        ]
      },
        /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
      },
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
      	this.data.list.forEach((item) => { 
          item.flag = false
        })
        this.setData({ 
          list: this.data.list
        })
      },
      showPlot(e) { 
        let index = e.currentTarget.dataset.index
        this.data.list[index].flag = !this.data.list[index].flag
        this.setData({ 
          list: this.data.list
        })
      }
    })

# WXSS文件 #

page { 
      background: #f6fbff;
    }
    
    .container { 
      width: 100%;
    }
    .wrap { 
      width: 100%;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
    }
    .item { 
      width: 100%;
      border: 1rpx solid #acacac80;
      border-radius: 10rpx;
      background: #fff;
      padding: 15rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
    }
    
    .item .top { 
      display: flex;
      justify-content: flex-start;
    }
    
    .item .top .img { 
      flex: 0 0 260rpx;
      height: 360rpx;
      margin-right: 20rpx;
    }
    
    .item .top .img image { 
      width: 100%;
      height: 100%;
    }
    
    .item .top .desc { 
      flex: 1;
      width: 0;
      font-size: 29rpx;
    }
    .item .top .desc .title { 
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    .item .top .desc .subtitle { 
      margin-bottom: 30rpx;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .item .top .desc .type { 
      margin-bottom: 10rpx;
    }
    .item .top .desc .duration { 
      margin-bottom: 10rpx;
    }
    .item .top .desc .opentime { 
      margin-bottom: 30rpx;
    }
    .item .top .desc .btn-group { 
      width: 100%;
      display: flex;
      justify-content: flex-start;
    }
    
    .item .top .desc .btn-group .btn { 
      width: 186rpx;
      height: 60rpx;
      background: #ffaa7f;
      border-radius: 30rpx;
      font-size: 29rpx;
      font-weight: normal;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
      margin: 0;
      padding: 0;
    }
    
    .item .top .desc .btn-group .btn:first-child { 
      margin-right: 20rpx;
    }
    
    .item .top .desc .btn-group .btnhover { 
      background: #ea986c;
    }
    
    .item .btm { 
      width: 100%;
      font-size: 30rpx;
    }
    .item .btm .tit-wrap { 
      width: 100%;
      padding: 4rpx 15rpx 10rpx 0rpx;
      box-sizing: border-box;
      margin-top: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .item .btm .tit-wrap .txt { 
      font-size: 30rpx;
    }
    
    .item .btm .tit-wrap .arrow { 
      width: 16rpx;
      height: 16rpx;
      border-top: 2rpx solid #33373E;
      border-left: 2rpx solid #33373E;
      transform: rotate(-135deg);
      margin-top: -10rpx;
      margin-right: 4rpx;
    }
    
    .item .btm .tit-wrap .arrow.active { 
      margin-top: 8rpx;
      transform: rotate(45deg);
    }
    
    .item .btm .plot { 
      text-indent: 2em;
    }

[20200815155530191.gif_pic_left]: /images/20210813/2f8a6601bb724f6ca472d7dc5e283e75.png