小高同学· 2021-12-04 23:35 采纳率: 100%
浏览 66
已结题

uni中循环出来一个列表修改前三个序号为图片

img


怎么样可以修改序号为12345678这样,
修改后123怎么替换成图中这样的图片,

<template>
    <view class="inv-h-box">
        <view class="inv-h-w">
            <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">增效</view>
            <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">人效</view>
            <view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">平效</view>
        </view>
        <view class="store_container" v-show="Inv == 0">
            <view class="store_list">
                <view class="uni-list">
                    <view class="uni-lista" @tap="go">
                        <view class="uni-listb">
                            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list"
                                :key="index">
                                <view class="uni-list-cell-navigate uni-navigate-right">
                                    <text>{{item}}</text>//序号
                                    <text class="t2">{{list}}</text>//内容
                                    <text class="t3">{{item}}<text>%</text></text>//右侧%内容
                                    <image src="../../static/back.png"></image>//右侧箭头图片
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="" v-show="Inv == 1">

        </view>
        <view class="" v-show="Inv == 2">

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                Inv: 0,
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9, ],
            }
        },
        methods: {
            changeTab(Inv) {
                that.navIdx = Inv;

            },

            go() {
                uni.navigateTo({
                    url: "/pages/gonglao/gonglao"
                })
            }
        }
    }
</script>

<style>
    .inv-h-box {
        background-color: #F6FBFE;
        padding-bottom: 20rpx;
    }

    .inv-h-w {
        height: 100upx;
        display: flex;
        padding-bottom: 20rpx;
    }

    .inv-h {
        font-size: 30rpx;
        flex: 1;
        text-align: center;
        color: #666666;
        height: 100upx;
        line-height: 100upx;
        position: relative;
    }

    .inv-h-se {
        font-size: 30rpx;
        font-family: PingFang SC;
        color: #2BE0DE;
    }

    .inv-h-se:after {
        content: '';
        position: absolute;
        bottom: 7rpx;
        top: auto;
        left: 42%;
        height: 4rpx;
        width: 44rpx;
        background-color: #2BE0DE;
    }

    page {
        background-color: #F2F2F2;
    }

    .uni-lista {
        width: 90%;
        margin: auto;
        background-color: #FFFFFF;
        border-radius: 20rpx;
    }

    .t2 {
        display: inline-block;
        width: 90%;
        height: 120rpx;
        margin-left: 40rpx;
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
    }

    .t3 {
        color: #FF5700;
        font-size: 24rpx;
        margin-right: 20rpx;
    }

    .uni-listb {
        width: 90%;
        margin: auto;

    }

    image {
        width: 25rpx;
        height: 25rpx;
    }

    .uni-list-cell-navigate {
        width: 100%;
        height: 120rpx;
        line-height: 120rpx;
        border-bottom: 1px solid #ebe3e6;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
</style>



  • 写回答

1条回答 默认 最新

  • 你好!机器人 2021-12-05 00:05
    关注

    序号那里先判断item值,等于1-2-3时分别显示图片,其他直接item

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 12月13日
  • 已采纳回答 12月5日
  • 创建了问题 12月4日

悬赏问题

  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 qgcomp混合物线性模型分析的代码出现错误:Model aliasing occurred
  • ¥100 已有python代码,要求做成可执行程序,程序设计内容不多
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助
  • ¥15 STM32控制MAX7219问题求解答
  • ¥20 在本地部署CHATRWKV时遇到了AttributeError: 'str' object has no attribute 'requires_grad'