微信小程序--365笔记第35天---手风琴效果

1.实现一个手风琴效果,点击展开,点击合起;

wxml:

    <view class='box'>
      <block wx:for="{{textList}}">
        <view class='text-item'>
          <view class='text-name'>{{item.title}}</view>
          <view class='text-desc' style="{{item.upStatus?'':'display:-webkit-box'}}">{{item.description}}</view>
          <view class='text-bottom'>
            <view class='text-btn' data-index="{{index}}" bindtap='upDown'>
              <image hidden='{{item.upStatus}}' src='/images/slide.png'></image>
              <image hidden='{{!item.upStatus}}' src='/images/up.png'></image>
              <text>{{!item.upStatus?'展开':'收起'}}</text>
            </view>
          </view>
        </view>
      </block>
    </view>

wxss:

    .box {
      display: flex;
      flex-direction: column;
      width: 690rpx;
      margin: auto;
    }

    .text-item {
      padding: 40rpx 0;
      border-bottom: solid 1px #efefef;
    }

    .text-name {
      margin-top: 10rpx;
      font-family: PingFangSC-Medium;
      font-size: 34rpx;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .text-desc {
      font-family: PingFangSC-Regular;
      font-size: 26rpx;
      color: #666;
      margin-top: 10rpx;
      /* display: -webkit-box; */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .text-bottom {
      display: flex;
      justify-content: flex-end;
    }

    .text-btn {
      margin-top: 20rpx;
      width: 103rpx;
      height: 39rpx;
      border: solid 1px #d2d2d2;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .text-btn image {
      width: 19rpx;
      height: 12rpx;
      margin-right: 10rpx;
    }

    .text-btn text {
      font-family: PingFangSC-Regular;
      font-size: 22rpx;
      color: #999;
    }

js:

    data: {
        textList: [{
            'description': "微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,微信小程序 - 折叠展开效果,",
          'title': "微信小程序 - 折叠展开效果",
          },
          
        ],
      },

    //原本没有upStatus这个字段,所以默认值为false
      upDown(event) {
        var index = event.currentTarget.dataset['index'];
        this.data.textList[index].upStatus = !this.data.textList[index].upStatus;
        this.setData({
          textList: this.data.textList
        })
      },

看下效果:

图片.png
图片.png

展开阅读全文

Python数据分析与挖掘

01-08
92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元   为什么学习数据分析?       人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。       从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。    本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。   二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。   三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。   四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。   五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值