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

 更新时间:2020年10月29日 11:58:59   作者:待我成长L  
这篇文章主要介绍了微信小程序淘宝首页双排图片布局排版代码,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

效果图:

在这里插入图片描述

使用技术主要是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;
 
}

到此这篇关于微信小程序淘宝首页双排图片布局排版代码的文章就介绍到这了,更多相关小程序双排图片布局排版内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文解决前端JS小数运算精度问题

    一文解决前端JS小数运算精度问题

    在做项目的时候,前端需要在表格的底部做一个汇总的功能,在采用reduce对当前属性所有值汇总时,发现汇总结果存在好长的小数位,本文给大家介绍了如何解决前端JS小数运算精度问题,需要的朋友可以参考下
    2024-02-02
  • ajaxFileUpload.js插件支持多文件上传的方法

    ajaxFileUpload.js插件支持多文件上传的方法

    这篇文章主要介绍了ajaxFileUpload.js插件支持多文件上传的方法,需要的朋友可以参考下
    2014-09-09
  • IE9+已经不对document.createElement向下兼容的解决方法

    IE9+已经不对document.createElement向下兼容的解决方法

    这篇文章主要介绍了IE9+已经不对document.createElement向下兼容的解决方法,需要的朋友可以参考下
    2015-09-09
  • JS实现服务五星好评

    JS实现服务五星好评

    这篇文章主要为大家详细介绍了JS实现服务五星好评,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例

    js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例

    js加密解密可以使用crypto-js它可以进行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,这是一个对称加密的库,可以使用 AES、DES、但没有rsa等非对称加密的方法
    2023-12-12
  • js 深拷贝函数

    js 深拷贝函数

    Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.那怎么来做呢 答案是克隆.
    2008-12-12
  • 左右悬浮可分组的网站QQ在线客服代码(可谓经典)

    左右悬浮可分组的网站QQ在线客服代码(可谓经典)

    QQ在线客服在每一个web开发人员的记忆里都是一个经典,既然是经典,也就是必不可少,那就应该很好的呈现出来,本文整理了一些左右悬浮可分组的网站QQ在线客服代码,需要的朋友可以了解下
    2012-12-12
  • 利用d3.js力导布局绘制资源拓扑图实例教程

    利用d3.js力导布局绘制资源拓扑图实例教程

    这篇文章主要给大家介绍了关于如何利用d3.js力导布局绘制资源拓扑图的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • Js图片点击切换轮播实现代码

    Js图片点击切换轮播实现代码

    这篇文章主要介绍了Js图片点击切换轮播实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • ES6新特性八:async函数用法实例详解

    ES6新特性八:async函数用法实例详解

    这篇文章主要介绍了ES6新特性八:async函数用法,结合实例形式分析了async函数的功能、原理、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04

最新评论