极客观点
项目管理
HarmonyOS
仿照饿了么的超市商品页面写了一个静态的页面，但是动态的渲染数据不会了。第一个问题怎么给右侧的商品<li>标签中的target-num赋值，区分这个区域的商品对应右侧商品的分类看下静态页面和动态页面代码怎么修改。
动态页面
`<div class="mui-scroll-wrapper scroll-left" id="scroll-left">
<div class="mui-scroll">
<ul class="mui-table-view">
<!-- <li class="mui-table-view-cell aui-text-center aui-border-b" onclick="addTodo( this )" >
<div class="aui-font-size-14 mty-lineh">酒水饮料</div>
</li>-->
<li class="mui-table-view-cell aui-text-center aui-border-b" v-for="item in items"
v-bind:class="{'mui-active': index==$index}" v-on:click="addTodo( this ,4)">
<div class="aui-font-size-14 mty-lineh" >
{{ item.classname }}
</div>
</li>
</ul>
</div>
</div>
<!--左侧区域滚动分类list结束-->
<!--右侧区域滚动商品list开始-->
<div class="scroll-right" >
<div class="mui-scroll" >
<div class="aui-content aui-margin-b-15 swiper-container" >
<ul class="aui-list aui-media-list" v-for="(vo,index)in list" >
<div class="group-name" id="">
{{ vo.className }}
</div>
<li class="aui-list-item swiper-container" v-for="vh in vo.goods" target-num="$index+1">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="../image/pic.jpg" onclick=""><!--openwin_goods_detail( {{ go.goodsid }} )-->
</div>
<div class="aui-list-item-inner">
<div class="aui-font-size-12">
{{ vh.goodsname }}
<br/>
<p class=" aui-font-size-12">
122克
</p>
</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">
￥{{ vh.goodsmoney }}
</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus" v-on:click="cutdowncart($index)"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">0</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus" v-on:click="addcart($index)"></i>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>`静态页面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<!--<link rel="stylesheet" type="text/css" href="../../css/mui/mui.css"/>-->
<link rel="stylesheet" type="text/css" href="../css/aui.2.0.css"/>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swiper-3.4.0.min.js"></script>
<style>
.css{
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
}
.scroll-left{
width: 23%;
background-color: #FFFFFF;
background-attachment: absolute;
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
}
.scroll-right{
width: 74%;
float: right;
position: absolute;
z-index: 10;
top: 0;
bottom: 0;
right: 0;
background-color: #FFFFFF;
overflow:hidden;/* winphone8和android4+ */
/*-webkit-overflow-scrolling: touch; /* ios5+ */
}
/*点击变蓝色高亮*/
.mui-table-view-cell.mui-active {
background-color: #EEE;
color: #e51c23;
}
.aui-list .aui-list-item {
padding-left: 0.2rem;
}
.mui-table-view-cell
{
padding-left: 0.25rem;padding-right: 0.25rem;
}
.mty-lineh{
line-height: 2rem;
}
.swiper-container,
.aui-content{
height:100%;
background:#f5f5f5;
}
.aui-content li:nth-child(4n+1) .aui-media-list-item-inner{
background:rgba(255,0,0,.5);
}
.show{
background:#0f0;
}
</style>
</head>
<body>
<!--左侧区域滚动分类list开始-->
<div class="mui-scroll-wrapper scroll-left" id="scroll-left">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell aui-text-center aui-border-b show" onclick="addTodo( this ,0)" >
<div class="aui-font-size-14 mty-lineh">酒水饮料</div>
</li>
<li class="mui-table-view-cell aui-text-center aui-border-b" onclick="addTodo( this ,4)" >
<div class="aui-font-size-14 mty-lineh">酒水饮料</div>
</li>
<li class="mui-table-view-cell aui-text-center aui-border-b" onclick="addTodo( this ,8)" >
<div class="aui-font-size-14 mty-lineh">酒水饮料</div>
</li>
<li class="mui-table-view-cell aui-text-center aui-border-b" onclick="addTodo( this ,12)" >
<div class="aui-font-size-14 mty-lineh">酒水饮料</div>
</li>
</ul>
</div>
</div>
<!--左侧区域滚动分类list结束-->
<!--右侧区域滚动商品list开始-->
<div class="scroll-right">
<div class="aui-content aui-margin-b-15">
<div class="swiper-container" >
<ul class="aui-list aui-media-list swiper-wrapper">
<li class="aui-list-item swiper-slide" target-num="1">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="1">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="1">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="1">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="2">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="2">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="2">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="2">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="3">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="3">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="3">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="3">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="4">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="4">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="4">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item swiper-slide" target-num="4">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media">
<img src="http://img1.3lian.com/2016/gif/w/2/81.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text aui-font-size-12">暴风魔镜4代安卓黄金版 虚拟现实智能VR眼镜3D头盔</div>
<div class="aui-list-item-text aui-padded-t-5 aui-padded-b-5 aui-font-size-14 aui-text-danger">￥2300</div>
<div class="aui-row aui-border">
<div class="aui-col-xs-12">
<div class="aui-col-xs-4 aui-pull-left aui-padded-l-15" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-col-xs-4 aui-text-center">
<span class="aui-font-size-12">25</span>
</div>
<div class="aui-col-xs-4 aui-pull-right aui-text-right aui-padded-r-15 aui-text-danger" style="background-color: #eee;">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--右侧区域滚动商品list结束-->
</body>
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量
freeMode : true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合
freeModeMomentumBounce : false,//动量反弹。false时禁用free模式下的动量反弹，slides通过惯性滑动到边缘时，无法反弹。注意与resistance（手动抵抗）区分
direction:'vertical',//滚动方向垂直
onTouchEnd: function(swiper){
// slides 数量
// console.log(swiper.activeIndex,,swiper.wrapper[0])
var target_num = $api.attr(swiper.slides[swiper.activeIndex], 'target-num');//获取Swiper的slides对象数组。通过mySwiper.slides[1]获取特定的slide。
$api.removeCls($api.dom('.mui-table-view li.show'), 'show');
$api.addCls($api.dom('.mui-table-view li:nth-child('+target_num+')'), 'show');
}
});
function addTodo(el,index){
$api.removeCls($api.dom('.mui-table-view li.show'), 'show');
mySwiper.slideTo(index, 1000, false);//Swiper切换到指定slide。index:必选，num，指定将要切换到的slide的索引。speed:可选，num(单位ms)，切换速度
$api.addCls(el, 'show');
}
</script>
</html>
好像得用v-bind:target-num="$index+1"