uniapp數(shù)組對(duì)象隨機(jī)抽取3個(gè)對(duì)象

<template>
<view class="boxPage">
　　<view class="imgList">
　　　　<view v-for="(item, index) in randomDataMarketList" :key="index" class="imgBox">
　　　　　　<image :src="item.imgUrl" mode="widthFix" class="img"></image>
　　　　　　<view class="title">{{item.name}}</view>
　　　　</view>
　　</view>
</view>
</template>

<script>
export default {
data() {
return {
dataMarketList: [{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/stock.png',
name: '股票',
activeIndex: 1
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/fund.png',
name: '基金',
activeIndex: 2
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/futures.png',
name: '期貨',
activeIndex: 3
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/economics.png',
name: '經(jīng)濟(jì)',
activeIndex: 4
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/info.png',
name: '資訊',
activeIndex: 5
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/bank.png',
name: '銀行',
activeIndex: 6
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/out.png',
name: '海外',
activeIndex: 7
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/industry.png',
name: '行業(yè)',
activeIndex: 8
},
],
randomDataMarketList: [], // 隨機(jī)3個(gè)庫(kù)列表
};
},
onLoad(option) {

},
onShow() {
this.getRandomDataMarketList(this.dataMarketList)
},
mounted() {

},
methods: {
// 獲取列表(每次進(jìn)入頁(yè)面隨機(jī)3個(gè))
getRandomDataMarketList(arr) {
this.randomDataMarketList = arr.sort((x, y) => {
return Math.random() > 0.5 ? -1 : 1;
}).slice(0, 3)
},
}
}
</script>

<style lang="scss" scoped>

.imgList {
margin: 0 26rpx;
display: flex;
justify-content: space-between;

.imgBox {
.img {
width: 210rpx;
height: 160rpx;
background: #E0E5EC;
border-radius: 16rpx;
}

.title {
margin-top: 7rpx;
margin-bottom: 30rpx;
width: 210rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
overflow: hidden; //1行超出隱藏
white-space: nowrap; //不折行
text-overflow: ellipsis; //溢出顯示省略號(hào)

word-wrap: break-word;   // 數(shù)字與漢字結(jié)合不換行展示
word-break: break-all;

// -webkit-line-clamp: 2; 超出2行顯示省略號(hào)
// display: -webkit-box;
// -webkit-box-orient: vertical;
// overflow: hidden;
// text-overflow: ellipsis;

}
}
}

</style>