【报Bug】uni-app转为微信小程序列表选项无法切换(需自己手动修改重新编译,那用于不用uni-app编写有什么区别)

示例代码：

//uni-app 运行的代码

<template> <div id="app" style=" "> <div class="ss"> <uni-search-bar placeholder="搜索产品"></uni-search-bar> </div> <view class="wbhz"> <div class="sxxxk"> //问题代码 //遍历列表选项 <ul> <li v-for="(y,index) in itemList" :class="['inv-h',Inv==index?'inv-h-se':'']" @click="asd(y.dictData),Inv=index" key="index">{{y.dictName}}</li> </ul>
</div>
<scroll-view scroll-y class="main3-1-lv">
//遍历列表内容
<view class="main2">
<image src='../../static/news-1.png' mode=""></image>
</view>
<view class="main3-1" v-for='(y2,index2) in proList' @click="openinfo(y2.id)" :key="index2">
<image :src='src+y2.proThumbPic'></image>
<view class="main3-1-1">
<span>{{y2.proTitle}}</span>
<span :class="['',Inv2[y2.isBestPro-1]]">{{y2.isBestProDic.dictName}}</span>
</view>
</view>
</scroll-view>
</view>
</div>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
export default {
components: {
uniSearchBar
},
mounted: function() {
this.asd('01')
},
data() {
return {
Inv: 0,
itemList: [],
src: 'http://192.168.0.15:8080/jf-system/file/showPicFile?fileId=',
proList: [],
Inv2: ['xfontsizecolor', 'sfontsizecolor'],
index: 1,
index2:0,
proList2: [],
}
},
onLoad() {
uni.showLoading({
'title': "加载数据中..."
});
this.cplb();
},
methods: {
openinfo(index2) {
uni.navigateTo({
url: './cpxq?id=' + index2,
})
},
cplb() {
uni.request({
url: 'http://192.168.0.15:8080/jf-system/weproduct/getProTypeList',
success: (res) => {
if (res.data) {
this.itemList = res.data;
uni.hideLoading();
} else {
// setTimeout(uni.hideLoading, 80);
uni.hideLoading();
return true
}
},
fail:function(){
uni.hideLoading();
}
})
},
asd(index) {
uni.showLoading({
'title': "加载数据中..."
});
uni.request({
url: 'http://192.168.0.15:8080/jf-system/weproduct/getAll?isBestPro=' + index,
success: (res) => {
this.proList = res.data.rows
if (res.data.rows) {
this.proList = res.data.rows
uni.hideLoading();
}
// else {
// uni.hideLoading();
// }
},
fail:function(){
uni.hideLoading();
}

            })  
        }  
    },  
    onReady() {  
        uni.showLoading({  
            'title': "加载数据中..."  
        });  
    }  
}  

</script>

<style lang="scss" scoped>

.wbhz{  
    width: 100%;  
    height: 98%;  
    position: absolute;  
    overflow: hidden;  
    display: float;  
}  
.f-item {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 100%;  
    height: 100upx;  
    font-size: 28upx;  

    position: relative;  
    &.active{  

        background: #f8f8f8;  
        &:before{  
            content: '';  
            position: absolute;  
            left: 0;  
            top: 50%;  
            transform: translateY(-50%);  
            height: 36upx;  
            width: 8upx;  

            border-radius: 0 4px 4px 0;  
            opacity: .8;  
        }  
    }  
}  
.right-aside{  
    flex: 1;  
    overflow: hidden;  
    padding-left: 20upx;  
}  
.left-aside{  
    flex-shrink: 0;  
    width: 200upx;  
    height: 100%;  
    background-color: #fff;  
}  
.ss {  
    width: 100%;  
    background-color: #F1F1F1;  
}  

.sxxxk>ul {  
    list-style: none;  
    width: 33%;  
    height: 94%;  
    position: absolute;  
    padding-left: 0%;  
    background-color: #F8F8F8;  
    /* border-right: 1px solid #ccc; */  
}  

.sxxxk>ul>li {  
    padding: 6.5%;  
    font-size: 28upx;  
}  

// .left-aside>ul {  
//  list-style: none;  
//  width: 33%;  
//  height: 94%;  
//  position: absolute;  
//  padding-left: 0%;  
//  background-color: #F8F8F8;  
//  /* border-right: 1px solid #ccc; */  
// }  

// .left-aside>ul>li {  

//  padding: 6.5%;  
//  font-size: 28upx;  
// }  

.inv-h {  
    color: #000000;  
    border: none;  
    background-color: #F8F8F8;  
}  

.inv-h-se {  
    color: #007AFF;  
    border-left: 4px solid #007AFF;  
    background-color: #FFFFFF;  
}  

/* .main1 {  
    width: 68%;  
    border-bottom: 1px dotted #007AFF;  
    margin-left: 33%;  
    height: 130upx;  
}  

.main1>span:nth-of-type(1) {  
    color: #000;  
    font-size: 26upx;  
    font-weight: 600;  
    margin: 2%;  
    width: 70%;  
}  

.main1>span:nth-of-type(2) {  
    font-size: 26upx;  
    position: absolute;  
    bottom: 2%;  
    left: 2%;  
}  

.main1>image {  
    width: 18%;  
    height: 70%;  
    position: absolute;  
    right: 5%;  
    bottom: 10%;  
    border-radius: 5%;  
    left: 3%;  
} */  

// 原  
// .main3-1 {  
//  width: 100%;  
//  margin-left: 33%;  
//  height: 130upx;  
//  position: relative;  
// }  

.main3-1 {  
    width: 100%;  
    // margin-left: 33%;  
    height: 130upx;  
    position: relative;  
}  

.main3-1-lv {  
    width: 68%;  
    float: right;  
    height: 92%;  
    overflow: auto;  
}  

.main3-1>view>span:nth-of-type(1) {  
    color: #000;  
    font-size: 26upx;  
    font-weight: 600;  
    /* margin: 2%; */  
    /* width: 70%; */  
    position: absolute;  
    /*   left: 17%; */  
    top: 20upx;  
}  

.main3-1>view>span:nth-of-type(2) {  
    /* color: #ccc; */  
    font-size: 26upx;  
    position: absolute;  
    /* bottom: 2%; */  
    /* left: 17%; */  
    top: 86upx;  
    display: block;  
}  

.main3-1>image {  
    width: 18%;  
    height: 90upx;  
    position: absolute;  
    bottom: 10%;  
    border-radius: 5%;  
    left: 3%;  
}  

.main3-1-1 {  
    width: 73.67%;  
    height: 130upx;  
    border-bottom: 1px solid #ccc;  
    position: absolute;  
    left: 25%;  
}  
// 原  
// .main2 {  
//  width: 68%;  
//  margin-left: 33%;  
//  height: 220upx;  
// }  
// .main2>image {  
//  width: 95%;  
//  border-radius: 15upx;  
//  display: block;  
//  height: 200upx;  
//  position: relative;  
//  left: 2.5%;  
//  top: 4%;  
// }  

.main2 {  
    width: 95%;  
    margin-left: 3%;  
    height: 220upx  
}  
.main2>image {  
     width: 95%;  
     -webkit-border-radius: 15rpx;  
     border-radius: 15rpx;  
     display: block;  
     height: 200rpx;  
     position: relative;  
     left: 2.5%;  
     top: 4%  
}  

.xfontsizecolor {  
    color: #DD524D;  
}  

.sfontsizecolor {  
    color: #4CD964;  
}  

</style>

操作步骤：

1

预期结果：

2

实际结果：

3