微信小程序-时间轴/抽屉展开收起特效

最新推荐文章于 2024-11-02 15:38:02 发布

原创

最新推荐文章于 2024-11-02 15:38:02 发布 · 2.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #小程序 #js

本文介绍了一种在微信小程序中实现时间轴展示和抽屉展开收起特效的方法，通过wxml、wxss和js代码实现了动态效果，可应用于项目中展示历史记录或时间线数据。

微信小程序项目中用到的时间轴展示和抽屉展开收起特效
本篇内容为原创，转载请注明出处。
一、效果图
默认为展开状态 --- 左：展开；右：收起

二、代码片段：

1、wxml部分

<view class="card">
  <view class="cardTitle" bindtap="changeUpDown">我是标题
    <!-- 项目里面用的是iconfont标签-箭头 -->
    <text class="iconfont icon-down {
  
  {showUp?'rotateUp':'rotateDown'}}"></text>
    <!-- 这里为了方便看，使用了< 小于号 -->
    <view class="textBox {
  
  {showUp?'rotateUp1':'rotateDown1'}}">
      <text>{
  
  {'<'}}</text>
    </view>
  </view>
  <view class="ivestment-c {
  
  {showUp?'hideBox':'showBox'}}">
    <view class="ivestment-i" wx:for="{
  
  {dataList}}" wx:key="index" wx:for-item="item" wx:for-index=