Swiper组件使用

Swiper官网文档

wxml代码编写

    <view class="category">
<!--display-multiple-items:同时显示的滑块数量  next-margin后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值      -->
        <swiper style="height:150rpx" display-multiple-items="{{2}}" next-margin="60rpx">
            <swiper-item wx:for="{{categoryList}}" wx:key="index" bind:tap="handleCategoryChange"
                         data-id="{{item.id}}">
                <view class="category-swiper-item">
                    <text class="category-name">{{item.name}}</text>
                </view>
            </swiper-item>
        </swiper>
    </view>

wxss样式

.category-swiper-item {
    border-radius: 20rpx;
    width: 300rpx;
    height: 150rpx;
    /*linear-gradient函数用于创建一个表示两种或多种颜色线性渐变的图片。*/
    background-image: linear-gradient(to right, #e68d44, #eb6d59);
}

.category-name {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    color: white;
}

.category {
    padding: 30rpx 0 30rpx 30rpx;
}

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

js中数据和函数

    data: {
        categoryList: [
            {
                "id": 1,
                "name": "保洁"
            },
            {
                "id": 2,
                "name": "汽修"
            },
            {
                "id": 3,
                "name": "厨师"
            }
        ]
    },
 handleCategoryChange(event) {
        const id = event.currentTarget.dataset.id
    }