欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年10月29日 11:58:59   作者：待我成長L  
這篇文章主要介紹了微信小程序淘寶首頁雙排圖片布局排版代碼,本文通過圖文實例相結(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)文章

  • 詳解JS模塊導(dǎo)入導(dǎo)出

    詳解JS模塊導(dǎo)入導(dǎo)出

    這篇文章主要介紹了詳解JS模塊導(dǎo)入導(dǎo)出以及相關(guān)問題解決方法，需要的朋友學(xué)習(xí)參考下吧。
    2017-12-12
  • BootStrap Validator對于隱藏域驗證和程序賦值即時驗證的問題淺析

    BootStrap Validator對于隱藏域驗證和程序賦值即時驗證的問題淺析

    這篇文章主要介紹了BootStrap Validator對于隱藏域驗證和程序賦值即時驗證的問題的解決方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-12-12
  • 深入理解 TypeScript Reflect Metadata

    深入理解 TypeScript Reflect Metadata

    這篇文章主要介紹了深入理解 TypeScript Reflect Metadata，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • Webpack中Source?Map配置深入解析

    Webpack中Source?Map配置深入解析

    這篇文章主要為大家介紹了Webpack中Source?Map配置深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-11-11
  • Javascript在IE和FireFox中的不同表現(xiàn)簡析

    Javascript在IE和FireFox中的不同表現(xiàn)簡析

    本文將詳細(xì)介紹Javascript在IE和FireFox中的不同表現(xiàn)，本人整理了一下，需要的朋友可以參考下
    2012-12-12
  • 一步一步教你寫帶圖片注釋的淡入淡出插件（三）

    一步一步教你寫帶圖片注釋的淡入淡出插件（三）

    接上一文，我們已經(jīng)實現(xiàn)了圖片的自動淡入淡出播放。接下來需要加入控制器。
    2010-10-10
  • Vue elementUI實現(xiàn)免密登陸與號碼綁定功能

    Vue elementUI實現(xiàn)免密登陸與號碼綁定功能

    這篇文章主要介紹了Vue elementUI實現(xiàn)免密登陸與號碼綁定功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-11-11
  • vue.config.js文件重寫打包工具配置信息

    vue.config.js文件重寫打包工具配置信息

    vue.config.js是一個可選的配置文件,可以在其中定義一些自定義的配置選項,本文就來介紹一下如何配置,具有一定的參考價值,感興趣的可以了解一下
    2023-12-12
  • JavaScript中類型的強(qiáng)制轉(zhuǎn)換與隱式轉(zhuǎn)換詳解

    JavaScript中類型的強(qiáng)制轉(zhuǎn)換與隱式轉(zhuǎn)換詳解

    類型強(qiáng)制Coercion是將值從一種類型轉(zhuǎn)換為另一種類型的過程（例如字符串轉(zhuǎn)換為數(shù)字,對象轉(zhuǎn)換為布爾值等）,下面這篇文章主要給大家給大家介紹了JavaScript中類型的強(qiáng)制轉(zhuǎn)換與隱式轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • 原生javascript的ajax請求及后臺PHP響應(yīng)操作示例

    原生javascript的ajax請求及后臺PHP響應(yīng)操作示例

    這篇文章主要介紹了原生javascript的ajax請求及后臺PHP響應(yīng)操作,結(jié)合示例形式分析了JavaScript前臺ajax請求的原理、調(diào)用、后臺PHP響應(yīng)請求及cookie保存相關(guān)操作技巧,需要的朋友可以參考下
    2020-02-02

最新評論