推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

    查看: 1356|回復: 0
    打印 上一主題 下一主題

    [小程序教程] 微信小程序教程(30) : 微信小程序之仿淘寶分類入口

    [復制鏈接]
    跳轉到指定樓層
    樓主
    發表于 2018-4-21 16:59:25 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

    分類入口,已經成為了商城項目必須的布局之一,這里以仿照淘寶的分類入口來做案例

    下圖紅框部分,就是本文重點講解部分,另外本文并沒有寫點擊某個入口跳轉頁面。

    如需學習頁面跳轉的同學,可以參考此文

    微信小程序的頁面跳轉和參數傳遞 —— 微信小程序教程系列(6)



    頁面分析:

    使用for循環遍歷所有項,插入頁面,頁面中的項使用左浮動,并使用百分比布局,設置20%的寬度每一項。

    這樣滿5個item后,自動排在下一行



    wxml:


    [html] view plain copy


    • <view class="menu-wrp">  
    •   <!--設定一個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:

    [css] view plain copy


    • .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:

    這里的準備的數據,我直接寫在js中,同學們可以改編成通過訪問接口來獲取
    [javascript] view plain copy


    • Page({  
    •   data: {  
    • //準備數據  
    •     menu:{  
    •       imgUrls:[  
    •         'http://gw.alicdn.com/tps/i2/TB19BluIVXXXXX6XpXXN4ls0XXX-183-129.png?imgtag=avatar',  
    •         'http://gw.alicdn.com/tps/TB1FDOHLVXXXXcZXFXXXXXXXXXX-183-129.png?imgtag=avatar',  
    •         'http://gw.alicdn.com/tps/TB1PlmNLVXXXXXEXFXXXXXXXXXX-183-129.png?imgtag=avatar',  
    •         'http://gw.alicdn.com/tps/TB1RN0HMFXXXXXNXpXXXXXXXXXX-183-129.png?imgtag=avatar',  
    •         'http://gw.alicdn.com/tps/TB1exaOLVXXXXXeXFXXXXXXXXXX-183-129.png?imgtag=avatar',  
    •         'http://img.alicdn.com/tps/TB1GzMJLXXXXXXoXXXXXXXXXXXX-183-129.png',  
    •         'http://gw.alicdn.com/tps/i3/TB1Ewu2KVXXXXXkapXXN4ls0XXX-183-129.png',  
    •         'http://gw.alicdn.com/tps/TB1cniBJpXXXXataXXXXXXXXXXX-183-129.png?imgtag=avatar',  
    •         'http://img.alicdn.com/tps/TB1caopLVXXXXaDaXXXXXXXXXXX-183-129.png',  
    •         'http://gw.alicdn.com/tps/i1/TB1c1FMIpXXXXawXpXXN4ls0XXX-183-129.png?imgtag=avatar'  
    •       ],  
    •       descs:[  
    •           '聚劃算',  
    •           '天貓',  
    •           '天貓國際',  
    •           '外賣',  
    •           '天貓超市',  
    •           '充值中心',  
    •           '阿里旅行',  
    •           '領金幣',  
    •           '到家',  
    •           '分類'  
    •       ]  
    •     }  
    •   }  
    •    
    • })  



    推56論壇 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與推56論壇立場無關
    2、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
    3、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
    4、如本帖侵犯到任何版權問題,請立即告知本站,本站將予與清除侵權內容或刪除該帖子并致以最深的歉意
    5、推56論壇管理員和版主有權不事先通知發貼者而刪除本文

    本版積分規則

    關閉

    推56站長論壇推薦上一條 /1 下一條

    站長QQ
    在線咨詢
    咨詢熱線
    QQ:405327411

    QQ|免責聲明|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

    推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回復 返回頂部 返回列表
    3分赛车计划软件 p3试机号码走势图 深圳风釆最新开奖号码 一起网赚论坛 东北麻将规则视频教程 陕西11选5 卡五星麻将下载官网 四肖八码中特期期准精选 多狐河南棋牌下载? 河南快三专家推荐预测号 体彩排列三排列五预测 城地股份股票 棋牌娱乐平台排名