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


Posted in Javascript onOctober 29, 2020

效果图:

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

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

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

Javascript 相关文章推荐
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
简单理解vue中Props属性
Oct 27 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
VSCode搭建React Native环境
May 07 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 #Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 #Javascript
微信小程序实现可长按移动控件
Nov 01 #Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 #Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 #Javascript
vue制作toast组件npm包示例代码
Oct 29 #Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 #Javascript
You might like
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php类中private属性继承问题分析
2012/11/01 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
python计算一个序列的平均值的方法
2015/07/11 Python
Python对象转JSON字符串的方法
2016/04/27 Python
详解python中requirements.txt的一切
2017/03/03 Python
Tesserocr库的正确安装方式
2018/10/19 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
年度考核自我评价
2014/01/25 职场文书
大学班长的职责
2014/01/27 职场文书
网络管理员岗位职责
2015/02/12 职场文书
勇敢的心观后感
2015/06/09 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
详解PHP设计模式之依赖注入模式
2021/05/25 PHP