本篇內(nèi)容介紹了“微信小程序商城實現(xiàn)項目分析”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)萬安免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

頁面分析：

使用for循環(huán)遍歷所有項，插入頁面，頁面中的項使用左浮動，并使用百分比布局，設(shè)置20%的寬度每一項。
這樣滿5個item后，自動排在下一行

wxml：

<view class="menu-wrp"> 
 <!--設(shè)定一個item項后，遍歷輸出--> 
 <view class="menu-list" wx:for="{{menu.imgUrls}}"> 
  <image class="menu-img" src="{{item}}" /> 
  <view class="menu-desc">{{menu.descs[index]}}</view> 
 </view> 
</view> 
<view class="gap-1"></view>

wxss：

.menu-wrp { 
 width:100%; 
 margin-top:20rpx; 
} 
.menu-wrp:after{ 
  content:""; 
  display:block; 
  clear:both; 
} 
 
.menu-list{ 
  float:left; 
  width:20%; 
  box-sizing: border-box; 
  padding-bottom:10px; 
} 
 
.menu-img{ 
  width:120rpx; 
  height:84rpx; 
  display:block; 
  margin:0 auto; 
  margin-bottom:5px; 
} 
.menu-desc{ 
  background-color:#ffffff; 
  color:#333333; 
  width:100%; 
  text-align: center; 
  display:block; 
  font-size:12px; 
} 
.gap-1,.gap-2{ 
  width:100%; 
  height:10rpx; 
  background:rgb(238, 238, 238); 
}

js：

這里的準(zhǔn)備的數(shù)據(jù)，我直接寫在js中，同學(xué)們可以改編成通過訪問接口來獲取

Page({ 
 data: { 
//準(zhǔn)備數(shù)據(jù) 
  menu:{ 
   imgUrls:[ 
    '/upload/otherpic55/131237.png?imgtag=avatar', 
    '/upload/otherpic55/131238.png?imgtag=avatar', 
    '/upload/otherpic55/131239.png?imgtag=avatar', 
    '/upload/otherpic55/131240.png?imgtag=avatar', 
    '/upload/otherpic55/131241.png?imgtag=avatar', 
    '/upload/otherpic55/131242.png', 
    '/upload/otherpic55/131243.png', 
    '/upload/otherpic55/131244.png?imgtag=avatar', 
    '/upload/otherpic55/131245.png', 
    '/upload/otherpic55/131246.png?imgtag=avatar' 
   ], 
   descs:[ 
     '聚劃算', 
     '天貓', 
     '天貓國際', 
     '外賣', 
     '天貓超市', 
     '充值中心', 
     '阿里旅行', 
     '領(lǐng)金幣', 
     '到家', 
     '分類' 
   ] 
  } 
 } 
  
})

“微信小程序商城實現(xiàn)項目分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享標(biāo)題：微信小程序商城實現(xiàn)項目分析
瀏覽路徑：http://www.rwnh.cn/article20/gjhhco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)