uniapp中将图片引入,使用数组将文字与图片进行遍历使用
将图片引入,放在数组中,使用数组将文字与图片进行遍历使用<template><view class="checkPage"><view class="date"><view class="tabWrap"><view v-for="(item, index) in typeList" :key="index" @click="clickTabl
·
将图片引入,放在数组中,使用数组将文字与图片进行遍历使用
<template>
<view class="checkPage">
<view class="date">
<view class="tabWrap">
<view v-for="(item, index) in typeList" :key="index" @click="clickTable(index)" >
<view class="eachTab" :class="[tabCurrentIndex == index ?'active':'']">
<image :src="tabCurrentIndex == index ?item.selectSrcUrl:item.srcUrl" style="width: 30upx;height: 30upx;"/>
<text style="color: #FFFFFF;">{{ item.name }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
//导入选择与不选择的图片
import select from '../../static/check/select.png'
import selectedAll from '../../static/check/selectedAll.png'
import daily from '../../static/check/daily.png'
import dailyAll from '../../static/check/dailyAll.png'
import weekly from '../../static/check/weekly.png'
import weeklyAll from '../../static/check/weeklyAll.png'
import monthly from '../../static/check/monthly.png'
import monthlyAll from '../../static/check/monthlyAll.png'
export default {
data() {
return {
tabCurrentIndex: '0',
typeList: [
{
value: '1',
srcUrl:select,
selectSrcUrl:selectedAll,
name: '全部'
},
{
value: '2',
srcUrl:daily,
selectSrcUrl:dailyAll,
name: '日报'
},
{
value: '3',
srcUrl:weekly,
selectSrcUrl:weeklyAll,
name: '周报'
},
{
value: '4',
srcUrl:monthly,
selectSrcUrl:monthlyAll,
name: '月报'
}
],
}
},
onLoad() {
// 页面显示是默认选中第一个
this.tabCurrentIndex = 0;
},
methods: {
//点击事件
clickTable(index) {
// console.log(index,"0000")
this.tabCurrentIndex = index;
},
}
}
</script>
<style scoped style="scss">
.checkPage{
width: 100%;
overflow: hidden;
}
.date{
background: #402EF1;
padding: 10upx;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 240upx;
}
.tabWrap {
display: flex;
height: 80upx;
width: 100%;
}
.eachTab{
display: flex;
align-items: center;
justify-content: space-evenly;
width: 145upx;
height: 50upx;
border-radius: 40upx;
background: #4945F0;
margin: 10upx 20upx;
}
</style>
效果图
更多推荐
已为社区贡献4条内容
所有评论(0)