微信小程序淘宝首页双排图片布局排版代码(推荐)

网友投稿 500 2023-11-09

效果图：

微信小程序淘宝首页双排图片布局排版代码(推荐)

使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式!

直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发!

wxml:

?
1
2
3
4
5
6
7
8
9
10
<view class="taobaolist">
<block wx:for="{{imagelist}}" wx:key="item">
<view class="taobao-list">
<view class="taobao-list-info" index="{{index}}">
<image class="taobao-list-photo" src="{{item.imageUrl}}"/>
<text class="taobao-list-desc">{{item.content}}</text>
</view>
</view>
</block>
</view>

js:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
imagelist:[{
imageUrl:/image/img1.webp,
content:包邮 韩式创意玻璃水杯架 沥水杯架茶杯架 倒挂架酒杯架沥水盘,
},{
imageUrl:/image/img2.webp,
content:景德镇陶瓷 手绘小花瓶 摆件迷你装饰艺术花插新中式家居茶几插花,
},{
imageUrl:/image/img3.webp,
content:可煮药18-24CM珐琅搪瓷汤锅双耳加厚炖锅平底锅盆电磁炉煤气通用,
},{
imageUrl:/image/img4.webp,
content:雏菊气球帘提拉帘刺绣成品窗纱罗马窗帘卧室飘窗帘 琪琪布艺,
}]

wxss:

到此这篇关于微信小程序淘宝首页双排

您可能感兴趣的文章:浅析微信小程序自定义日历组件及flex布局最后一行对齐问题微信小程序通过js实现瀑布流布局详解微信小程序框架的页面布局代码微信小程序实现瀑布流布局与无限加载的方法详解微信小程序 UI布局常用技巧整理总结微信小程序 简单DEMO布局，逻辑，样式的练习

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 代码 微信小程序 小程序 js
上一篇:微信小程序实现自定义弹窗组件的示例代码
下一篇:移动门户平台：开启无限便捷的移动世界
相关文章

 发表评论

暂时没有评论，来抢沙发吧~