百度智能小程序展开/收起功能

##如图所示

百度智能小程序展开/收起功能_第1张图片百度智能小程序展开/收起功能_第2张图片

//swan:





{{item.name}}

 收起
//css

.rowlike {
    float: left;
    background-color: rgb(255, 255, 255);
    display: table;
    width: 100%;
}
.rowlike .label {
    float: left;
    width: 158rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #eeeeee;
    text-align: center;
    color: rgb(83, 83, 83);
    font-size: 24rpx;
    margin-left: 22rpx;
    margin-top: 30rpx;
    border-radius: 30rpx;
    overflow: hidden;
}

.label.active {
    border: 1rpx solid rgb(0, 120, 255);
    color: rgb(0, 120, 255);
    background: #fff;
    height: 45rpx;
    line-height: 45rpx;
}
.hiddenmore .more-item {
  display: none;
}

.showmore .more-item {

  display: inline-block;
  

}
//js

/**
 * @file index.js
 * @author 菜鸟老五
 * @date   2020/5/27
 */
const app = getApp()
import { special } from "../../service/special.js";
import { aggregate } from "../../service/aggregate.js";
import { software } from "../../service/software.js";
Page({
    data: {
       //    软件数据
        softwareLabel:software.softwareLabel,
        sid:0,
        showMore:false
    },
  
   /**选中软件顶部标签切换
     */
    getSoftStart(e) {
    console.log("合集模块中选中的标签==>",e.currentTarget.dataset.item);
        var id = parseInt(e.currentTarget.dataset.item);
        var list = this.data.softwareLabel;
        for (var i in list) {
            if (list[i].selected) {
                list[i].selected = true;
            } else {
                list[i].selected = false;
            }
        }
        this.setData({
            sid: id
        })
    },

})

 

 

你可能感兴趣的:(前端)