微信小程序淘寶首頁雙排圖片布局排版代碼(推薦)

更新時間：2020年10月29日 11:58:59 作者：待我成長L

這篇文章主要介紹了微信小程序淘寶首頁雙排圖片布局排版代碼,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

效果圖：

在這里插入圖片描述

使用技術(shù)主要是flex布局,絕對定位布局,小程序前端頁面開發(fā),以及一些樣式!

直接貼代碼,都有詳細(xì)注釋,熟悉一下,方便以后小程序開發(fā)!

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:'包郵 韓式創(chuàng)意玻璃水杯架 瀝水杯架茶杯架 倒掛架酒杯架瀝水盤',
  },{
   imageUrl:'/image/img2.webp',
   content:'景德鎮(zhèn)陶瓷 手繪小花瓶 擺件迷你裝飾藝術(shù)花插新中式家居茶幾插花',
  },{
   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;
 
}

到此這篇關(guān)于微信小程序淘寶首頁雙排圖片布局排版代碼的文章就介紹到這了,更多相關(guān)小程序雙排圖片布局排版內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

ES6中非常實(shí)用的新特性介紹
ECMAScript 6離我們越來越近了，作為它最重要的方言，Javascript也即將迎來語法上的重大變革，InfoQ特開設(shè)“深入淺出ES6”專欄，來看一下ES6將給我們帶來哪些新內(nèi)容
2016-03-03
setTimeout時間設(shè)置為0詳細(xì)解析
setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層容器名稱, 這是用來設(shè)定一個時間, 時間到了, 就會執(zhí)行一個指定的 method，下面這篇文章主要給大家介紹了關(guān)于setTimeout時間設(shè)置為0的相關(guān)資料，需要的朋友可以參考下。
2018-03-03
JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合實(shí)例形式分析了使用indexOf()方法進(jìn)行數(shù)組的判斷與去重相關(guān)原理與具體操作技巧,需要的朋友可以參考下
2018-09-09
js css實(shí)現(xiàn)垂直方向自適應(yīng)的三角提示菜單
這篇文章主要為大家詳細(xì)介紹了js css實(shí)現(xiàn)垂直方向自適應(yīng)的三角提示菜單的相關(guān)資料,需要的朋友可以參考下
2016-06-06
面試判斷元素是否在可視區(qū)域中IntersectionObserver詳解
這篇文章主要為大家介紹了判斷元素是否在可視區(qū)域中IntersectionObserver面試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
Javascript發(fā)布訂閱模式介紹
這篇文章介紹了Javascript發(fā)布訂閱模式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
IE瀏覽器中圖片onload事件無效的解決方法
在做一個項(xiàng)目的時候才發(fā)現(xiàn)的這個bug，其實(shí)這是一個很常見的問題，只是之前對圖片的處理太少，沒有碰到過。
2014-04-04
5 cool javascript apps
5 cool javascript apps...
2007-03-03
discuz中用到的javascript函數(shù)解析
discuz中用到的js不論是多瀏覽器兼容性和實(shí)用性都是非常不錯的，推薦大家看下
2008-05-05
關(guān)于include標(biāo)簽導(dǎo)致js路徑找不到的問題分析及解決
本文為大家詳細(xì)介紹下關(guān)于使用jsp:include標(biāo)簽及<%@ include標(biāo)簽時要注意的事項(xiàng)以及實(shí)測發(fā)現(xiàn)問題并解決問題的全過程，感興趣的各位可以參考下哈，希望對大家有所幫助
2013-07-07