uniapp数组对象随机抽取3个对象

一、页面代码：

<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>

二、js代码：

<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: '经济',
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: '行业',
activeIndex: 8
},
],
randomDataMarketList: [], // 随机3个库列表
};
},
onLoad(option) {

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

},
methods: {
// 获取列表(每次进入页面随机3个)
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; //溢出显示省略号

word-wrap: break-word;   // 数字与汉字结合不换行展示
word-break: break-all;

// -webkit-line-clamp: 2; 超出2行显示省略号
// display: -webkit-box;
// -webkit-box-orient: vertical;
// overflow: hidden;
// text-overflow: ellipsis;

}
}
}

</style>