微信小程序淘寶首頁雙排圖片布局排版代碼(推薦)
更新時(shí)間：2020年10月29日 11:58:59 作者：待我成長L
這篇文章主要介紹了微信小程序淘寶首頁雙排圖片布局排版代碼,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
效果圖：
使用技術(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)文章
ECMAScript 6離我們越來越近了，作為它最重要的方言，Javascript也即將迎來語法上的重大變革，InfoQ特開設(shè)“深入淺出ES6”專欄，來看一下ES6將給我們帶來哪些新內(nèi)容2016-03-03
setTimeout時(shí)間設(shè)置為0詳細(xì)解析
setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層容器名稱, 這是用來設(shè)定一個(gè)時(shí)間, 時(shí)間到了, 就會執(zhí)行一個(gè)指定的 method，下面這篇文章主要給大家介紹了關(guān)于setTimeout時(shí)間設(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ā)布訂閱模式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
在做一個(gè)項(xiàng)目的時(shí)候才發(fā)現(xiàn)的這個(gè)bug，其實(shí)這是一個(gè)很常見的問題，只是之前對圖片的處理太少，沒有碰到過。2014-04-04
5 cool javascript apps...2007-03-03
discuz中用到的js不論是多瀏覽器兼容性和實(shí)用性都是非常不錯(cuò)的，推薦大家看下2008-05-05
關(guān)于include標(biāo)簽導(dǎo)致js路徑找不到的問題分析及解決
本文為大家詳細(xì)介紹下關(guān)于使用jsp:include標(biāo)簽及<%@ include標(biāo)簽時(shí)要注意的事項(xiàng)以及實(shí)測發(fā)現(xiàn)問題并解決問題的全過程，感興趣的各位可以參考下哈，希望對大家有所幫助2013-07-07