微信小程序：模仿树形控件——画三角形

---

前言

微信小程序没有像element ui这样的框架，页面需要展现一个树形结构，于是就自己写了一个，而ui又没有控制数据展开与关闭的小三角形图标，于是就利用css在前端画了一个三角形。

---

一、前端样式

用一个空的view标签来表示三角形。
index.wxml:

 <view class="triangleL">view> 
 <view class="triangleD">view> 

二、css

我使用的是scss，当然可以使用less，也可以用微信小程序自带的wxss。

1.底边在左的三角形

.triangleL {
     
            margin-right: 5rpx;
            width: 0rpx;
            height: 0rpx;
            border-style: solid;
            border-color: transparent transparent transparent #333333;
            border-width: 10rpx;
        }

设置view的宽度和高度为0px，利用border属性，设置border-style为直线，设置 border-width的宽度为10rpx。边框的颜色使用border-color，border-color的顺序是上、右、下、左。这时候可以根据需要，想要三角形底边在哪个位置，就设置该位置有颜色，其余的边框位置颜色设为透明，即transparent。

2.底边在上的三角形

.triangleD {
     
            margin-right: 5rpx;
            margin-top: 10rpx;
            width: 0rpx;
            height: 0rpx;
            border-style: solid;
            border-color: #333333 transparent transparent transparent;
            border-width: 10rpx;
        }

---

小三角形大概就是这样画的啦，主要是只有一个页面在用，就自己写了一个简单的树形结构~