<swiper id="swiperview" vertical="true" index="0" indicator="false" onchange="changeswiper">
<list class="list1">
<block for="{{first}}">
<list-item class="listitem2">
<image class="img1" src="{{ $item.cimg }}"></image>
<text class="tex1">{{ $item.cname }}</text>
<image class="img4" src="common/qian.png"></image>
<text class="txt2">{{ $item.price }}</text>
<image class="img2" src="common/jiahao.png"></image>
</list-item>
</block>
<block for="{{second}}">
<list-item class="listitem2">
<image class="img1" src="{{ $item.cimg }}"></image>
<text class="tex1">{{ $item.cname }}</text>
<image class="img4" src="common/qian.png"></image>
<text class="txt2">{{ $item.price }}</text>
<image class="img2" src="common/jiahao.png"></image>
</list-item>
<block for="{{third}}">
<list-item-group class="group">
<list-item class="listitem3">
<image class="img5" src="{{ $item.cimg }}"></image>
<block for="{{ (cindex,cvalue) in $item.lname }}">
<list-item class="listitem4">
<image class="img6" src="{{ cvalue.icon }}"></image>
<text class="txt6">{{ cvalue.fname }}</text>
<image class="img7" src="{{ cvalue.icon1 }}"></image>
</list-item>
</block>
</list-item>
</list-item-group>
<block for="{{forth}}">
<list-item class="listitem2">
<image class="img1" src="{{ $item.cimg }}"></image>
<text class="tex1">{{ $item.cname }}</text>
<image class="img4" src="common/qian.png"></image>
<text class="txt2">{{ $item.price }}</text>
<image class="img2" src="common/jiahao.png"></image>
</list-item>
<swiper class="sswiper" autoplay="true" duration="3000" indicator="true">
<image class="img8" src="common/wu6.jpg"></image>
<image class="img8" src="common/wu7.jpg"></image>
<image class="img8" src="common/wu8.jpg"></image>
</swiper>
<list class="list7">
<block for="{{seventh}}">
<list-item class="listitem7">
<image class="img9" src="{{ $item.cimg }}"></image>
</list-item>
</block>
</list>
<image class="img10" src="common/lu1.jpg"></image>
<image class="img10" src="common/lu2.jpg"></image>
<image class="img10" src="common/lu3.jpg"></image>
<image class="img10" src="common/lu4.jpg"></image>
<image class="img10" src="common/lu5.jpg"></image>
<list class="list2">
<block for="{{eleventh}}">
<list-item-group class="group">
<list-item class="listitem3">
<image class="img10" src="{{ $item.cimg }}"></image>
<block for="{{ (cindex,cvalue) in $item.lname }}">
<list-item class="listitem4">
<image class="img6" src="{{ cvalue.icon }}"></image>
<text class="txt6">{{ cvalue.fname }}</text>
<image class="img7" src="{{ cvalue.icon1 }}"></image>
</list-item>
</block>
</list-item>
</list-item-group>
</list>
</swiper>
</swiper>
```
参考:js开发10 购物页面之商品分类页面 - 鸿蒙HarmonyOS技术社区 - 官方战略合作伙伴 - 51CTO.COM
完整代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/Jltf_shopping_demo