13.微信小程序之折叠效果

心已赠人 2022-04-16 05:16 330阅读 0赞

原本一腔热血准备学习es6，但是大佬让我自学php o(╯□╰)o  我，到底给了他什么错觉。。。只能说目前小程序的前端我觉得是可以胜任的，前端还是有很多需要学习的东西

大佬给我两周的时间把php的语法熟悉起来，然后去熟悉tp5。11月10日到现在17号，已过去一周，学习进度缓慢。怎么感觉又回到了学校，拖到最后一刻才去写作业。。。

撤回正题ヾ(◍°∇°◍)ﾉﾞ，一个折叠效果，没什么好讲的

# 一.效果图 #

1.![20181117151802699.png][]

2.![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70][]

# 二.代码 #

## 1.fold.wxml ##

<view class="li toggle" bindtap='changeToggle'>
      <view>运费合计</view>
      <view class='li-align'>
        <text>6.00元</text>
        <image class='entry' style="transform:rotate({
       {isShow?'90deg':'-90deg'}});" src="{
       {entry}}"></image>
      </view>
    </view>
    
    <view hidden='{
       {isShow}}' class="li-wrap">
      <view class='li content'>
        <view>计费重量</view>
        <view>1.00KG</view>
      </view>
      <view class='li content'>
        <view>计重运费</view>
        <view>7.00元</view>
      </view>
      <view class='li content line'>
        <view>快递员优惠</view>
        <view>-1.00元</view>
      </view>
    </view>
    
    <view class="li common">
      <view>保费</view>
      <view>
        <text>9.00元</text>
      </view>
    </view>

## 2.fold.wxss ##

page{
      background: #eee;
    }
    .li{
      background: #fff;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: space-between;
      padding:30rpx 20rpx 30rpx 30rpx;
    }
    .toggle{
      font-size:32rpx;
      border-bottom: 1rpx solid #eee;
    }
    .li-align{
      display: flex;
      align-content: center;
      align-items: center;
    }
    .content{
      font-size: 24rpx; 
      color: #6f6f6f;
      padding-right:50rpx;   
    }
    .li-wrap .line{
      border-bottom: 1rpx solid #eee;
    }
    .entry{
      width:18rpx;
      height:32rpx;
      margin-left: 20rpx;
    }
    .common{
      font-size: 32rpx;
      padding-right: 50rpx;
      border-bottom: 1rpx solid #eee;
    }

## 3.fold.js ##

Page({
    
      data: {
        isShow:true,
        //这是个图片地址,大致长这样“>”，略
        entry:''
      },
      
      changeToggle(){
        var that = this;
        that.setData({
          isShow:!that.data.isShow
        })
      },
      
    })

[20181117151802699.png]: /images/20220416/10bb9c58725540a1a6e2f488628355a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70]: /images/20220416/142b544db64145328056f60a53e2ce9f.png