小程序淘宝首页双排图片布局排版代码

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

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

wxml:

 <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:

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

wxss:

.taobaolist{margin-top: 20rpx;
}
.taobao-list-info{float: left;margin-left: 20rpx;margin-top: 20rpx;position: relative;
}.taobao-list-photo{width: 350rpx;height: 350rpx;
}
.taobao-list-desc{display: block;position: absolute;color: #000000;left: 0;width: 100%;text-align: center;font-size: 25rpx;padding: 10rpx;}

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

微信小程序（看文档写实例九）微信小程序课堂宝APP实现练习模块逻辑代码
接上篇博文,这篇主要描述练习模块的代码逻辑,其中包括test页面,答题detail页面以及提交答题后答卷answer页面. 一.test页面 test页面其实就是从服务器获得章节练习题的内容,然后统计 ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
微信小程序使用image组件时图片不显示的一个解决方法
第一次写博客: 图片链接可正常访问,但是使用组件时,图片不显示,偶然之间尝试到了一种解决方法,我使用的是微信小程序云端,读取本地图片时使用了具体的路径,错误用法如下如果按照指示\ 一级一级选下来,导 ...

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

小程序淘宝首页双排图片布局排版代码

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

最新文章

热门文章