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


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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
Node.js的包详细介绍
Jan 14 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
JavaScript仿京东轮播图效果
Feb 25 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
新浪新闻小偷
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
Angular实现form自动布局
2016/01/28 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
JS实现json数组排序操作实例分析
2019/10/28 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
JPype实现在python中调用JAVA的实例
2017/07/19 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
葬礼司仪主持词
2014/03/31 职场文书
财务情况说明书范文
2014/05/06 职场文书
英文版辞职信
2015/02/28 职场文书
办公室主任个人总结
2015/02/28 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫