uniapp+vue3 随机、换一批

案例

代码

html 复制代码
<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>
javascript 复制代码
<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>
css 复制代码
.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;
		}
	}
}
相关推荐
00后程序员张42 分钟前
如何提高 IPA 安全性 多工具组合打造可复用的 iOS 加固与反编译防护体系(IPA 安全 iOS 加固 无源码混淆 Ipa Guard 实战)
android·安全·ios·小程序·uni-app·iphone·webview
游戏开发爱好者82 小时前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview
望风的懒蜗牛6 小时前
android studio开发UniComponent<SurfaceView>组件
android·uni-app·android studio
2501_916007476 小时前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
iOS阿玮7 小时前
请及时同意苹果开发者协议,避免影响迭代工作。
uni-app·app·apple
00后程序员张7 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909069 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Felicity_Gao10 小时前
uni-app 开发APP应用媒体处理与文件管理功能
java·uni-app·媒体
2501_9159184110 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
2501_9159214312 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview