css伪元素after方向箭头

css_abs.png

小程序常见列表，其中箭头导向标识借助css伪元素实现。

wxml

<view class="page-body">
    <view class="list" wx:for="{{listData}}" wx:for-item="item">
        <view class="list-item" hover-class="list-item-hover">
            <view class="list-item-time">{{item.time}}</view>
            <view class="list-item-distance">
                {{item.distance}}
            </view>
        </view>
    </view>
</view>

wxss

.page-body {
    background-color: #f6f6f6;
    width: 100%;
}

.list {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* background-color: green; */
}

.list-item {
    margin-top: 20rpx;
    background-color: white;
    padding: 2% 5%;
    height: 100rpx;
    width: 100%;
}

.list-item-time {
    color: rgb(178, 178, 178);
}

.list-item-distance {
    font-size: large;
    display: flex;
    flex-direction: row;
}

.list-item-distance:after {
    content: '';
    position: absolute;
    /* top: 0rpx; */
    margin-top: -10rpx;
    right: 60rpx;
    height: 20rpx;
    width: 20rpx;
    border-top: 6rpx solid rgb(178, 178, 178);
    border-right: 6rpx solid rgb(178, 178, 178);
    transform: rotate(45deg);
}

.list-item-hover {
    /* position: relative; */
    /* top: 3rpx; */
    /* box-shadow:0px 0px 10px #bbbec4 inset;  */
    background-color: rgb(236, 236, 236);
}

js

    data: {
        listData: []
    },
    /**
     * Lifecycle function--Called when page load
     */
    onLoad: function (options) {
        let listData = [];

        for (let i = 0; i < 15; i++)
        {
            listData.push({
                time: "2020-1-" + i,
                distance: (i * 10) + "KM"
            })
        }

        this.setData({
            listData: listData
        });
    },