uniapp+vue3 随机、换一批

案例

代码

<view class="list"><view class="row" v-for="(item,index) in showList" :key="index"><view class="txt">{{ index + 1 }}、{{item.title}}</view><view class="arrow"><fui-icon name="arrowright" color="#6C6B6B" size="34"></fui-icon></view></view><view class="replaceBtn" @click="replaceList"><image src="/pages/userSub/static/images/replace.png" mode="aspectFill"></image>换一批</view>
</view>

<script setup>import {onLoad,onShow,onReachBottom} from '@dcloudio/uni-app'import i from '@/libs/common/index.js'import api from '@/request/api.js'import {nextTick,ref,shallowRef,reactive} from "vue";import {userStore} from '@/store/userStore.js'import {commonStore} from '@/store/commonStore.js'const user = userStore()const common = commonStore()const list = ref([])const showList = ref([]) // 新增显示用的列表const page = ref(1)const size = ref(10000)const loadState = ref(1)onShow(() => {getKeFuList()getKeFuInfo()})function getKeFuList() {api.getKeFuList({page: page.value,size: size.value,}).then(res => {if (res.code == 1) {list.value = res.data// 初始化显示三条replaceList()}})}function replaceList() {// 随机打乱数组并取前三个const shuffled = [...list.value].sort(() => Math.random() - 0.5)showList.value = shuffled.slice(0, 3)}</script>

.list {margin: 0 30rpx 16rpx;background: #FFFFFF;border-radius: 20rpx 20rpx 20rpx 20rpx;padding: 0 30rpx;.row {padding: 30rpx 0;border-bottom: 1rpx solid #E4E4E4;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #3D3D3D;.txt {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 100%;}.arrow {flex-shrink: 0;margin-left: 15rpx;}}.replaceBtn {font-size: 28rpx;color: #606266;padding: 30rpx 0;display: flex;justify-content: center;align-items: center;image {width: 24rpx;height: 24rpx;margin-right: 10rpx;}}
}