当前位置：首页 > news >正文

uniapp——列表选择样式

news 2025/7/19 8:38:08

案例

在这里插入图片描述

代码

<view class="list"><block v-for="(item,index) in 8" :key="index"><view class="item" @click="choosePackage(item)" :class="{'active':item == current}"><view class="i_money"><text class="i_num">2</text>元</view><view class="i_txt">套餐</view></view></block>
</view>

export default {components: {},data() {return {current: 0,};},watch: {},onLoad() {},onShow() {},methods: {choosePackage(item) {console.log(item);this.current = item}}
}

.list {margin-top: 44rpx;display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 16px 14px; //行间距 列间距.item {background: #FFFFFF;border-radius: 10rpx 10rpx 10rpx 10rpx;border: 1rpx solid #BCBCBC;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20rpx 0;.i_money {font-weight: bold;font-size: 22rpx;color: #292929;.i_num {font-size: 30rpx;}}.i_txt {font-size: 22rpx;color: #292929;margin-top: 5rpx;}}.active {background: #FFFDFA;border: 1rpx solid #FE8300;position: relative;}.active::before {content: '';position: absolute;right: 5rpx;top: 6rpx;width: 12rpx;height: 9rpx;border-right: 2rpx solid #FFFFFF;border-top: 2rpx solid #FFFFFF;transform: rotate(135deg);z-index: 2;}.active::after {content: '';position: absolute;right: 0;top: 0;border-radius: 0 6rpx 0 10rpx;width: 26rpx;height: 26rpx;background-color: #FE8300;}}