本文给大家带来的是微信小程序骆驼优品手机商城首页样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--index.wxml-->
<view class="container">
<view class="m-indexHd" style="height: 162rpx;">
<view class="m-hd g-row">
<view class="m-indextop">
<view class="top-line">
<view class="logo"></view>
<view class="m-searchTop">
<navigator url="../search/search" hover-class="changestyle">
<view class="zw-search-link">
<view class="icon-search"></view>
<text class="placeholder">点击输入搜索商品</text>
</view>
</navigator>
</view>
</view>
</view>
<view class="inner">
<view class="m-navs disflex">
<view class="active">
<navigator url="../product/productList/productList" hover-class="navigator-hover"><text class="txt">推荐</text></navigator>
</view>
<view>
<navigator url="../product/productList/productList" hover-class="navigator-hover"><text class="txt">户外</text></navigator>
</view>
<view>
<navigator url="../product/productList/productList" hover-class="navigator-hover"><text class="txt">运动</text></navigator>
</view>
<view>
<text class="txt">瑜伽</text>
</view>
<view>
<text class="txt">男鞋</text>
</view>
<view>
<text class="txt">女鞋</text>
</view>
<view>
<text class="txt">童装</text>
</view>
<view>
<text class="txt">男装</text>
</view>
<view>
<text class="txt">瑜伽</text>
</view>
<view>
<text class="txt">男鞋</text>
</view>
<view>
<text class="txt">女鞋</text>
</view>
<view>
<text class="txt">童装</text>
</view>
<view>
<text class="txt">男装</text>
</view>
<view>
<text class="txt">瑜伽</text>
</view>
<view>
<text class="txt">男鞋</text>
</view>
<view>
<text class="txt">女鞋</text>
</view>
<view>
<text class="txt">童装</text>
</view>
<view>
<text class="txt">男装</text>
</view>
</view>
</view>
</view>
</view>
<view class="zw-banner">
<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" circular="{{circular}}" indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="../product/productDetail/productDetail" hover-class="changestyle"><image src="{{item}}" class="slide-image" width="750" height="376" /></navigator>
</swiper-item>
</block>
</swiper>
</view>
<view class="zw-tabs">
<view class="zw-tabs-item">
<view>
<image src='http://img02.camel.com.cn/image/zw_icon1.png' alt=""></image>
</view>
<text>领10元券</text>
</view>
<view class="zw-tabs-item">
<view>
<image src='http://img02.camel.com.cn/image/zw_icon2.png' alt=""></image>
</view>
<text>领20元券</text>
</view>
<view class="zw-tabs-item">
<view>
<image src='http://img02.camel.com.cn/image/zw_icon3.png' alt=""></image>
</view>
<text>领50元券</text>
</view>
<view class="zw-tabs-item">
<view>
<image src='http://img02.camel.com.cn/image/zw_icon4.png' alt=""></image>
</view>
<text>下单返现</text>
</view>
<view class="zw-tabs-item">
<view>
<image src='http://img02.camel.com.cn/image/zw_icon5.png' alt=""></image>
</view>
<text>买一送一</text>
</view>
</view>
<view class="layort-h">
<view class="zw-title">
<image style="width:260rpx; height:33rpx;" src='http://img02.camel.com.cn/image/zw_title1.png' alt=""></image>
</view>
<view class="zw-pro1">
<view class="zw-pro1-link">
<image style="width:375rpx; height:529rpx;" src="https://topic.camel.com.cn/module/wap_index_youtuijian_201709/d2b01ed0-a6ed-498c-8d6e-4de94b5ae5d7.jpg" alt=""></image>
</view>
<view class="zw-pro1-link">
<image style="width:375rpx; height:529rpx;" src="https://topic.camel.com.cn/module/wap_index_youtuijian_201709/d737b248-0f9c-4d36-83b1-9c31bb13e1a3.jpg" alt=""></image>
</view>
</view>
</view>
<view class="layort-h">
<view class="zw-pro2">
<view class="zw-countdown">
<text>距离结束</text>
<text class="count">45</text>
<text>:</text>
<text class="count">36</text>
<text>:</text>
<text class="count">36</text>
</view>
</view>
<view class="zw-pro3">
<view>
<image style="width:750rpx; height:389rpx;" class="zw-pro3-top" src="https://topic.camel.com.cn/module/wap_index_timebuy_201709_1/79846bf8-7acf-4c39-b019-20113d1cf2c3.jpg" alt=""></image>
</view>
<view class="zw-pro3-left">
<view>
<image style="width:372rpx; height:591rpx;" src="https://topic.camel.com.cn/module/wap_index_timebuy_201709_1/dde245fa-2b54-4840-ab45-ce64ace8128b.jpg" alt=""></image>
</view>
</view>
<view class="zw-pro3-right">
<view>
<image style="width:372rpx; height:293rpx;" src="https://topic.camel.com.cn/module/wap_index_timebuy_201709_1/8f8a1d49-e0f1-4fa5-b51d-f9766e4e621b.jpg" alt=""></image>
</view>
<view>
<image style="width:372rpx; height:293rpx;" src="https://topic.camel.com.cn/module/wap_index_timebuy_201709_1/e303f177-3d10-485f-8ca0-a5c42fc462e5.jpg" alt=""></image>
</view>
</view>
</view>
</view>
<view class="layort-h">
<view class="zw-title">
<image style="width:149rpx; height:34rpx;" src="http://img02.camel.com.cn/image/zw_title2.png" alt=""></image>
</view>
<view class="zw-banner">
<image style="width:750rpx; height:400rpx;" src="https://topic.camel.com.cn/module/wap_index_topic_201709/3c0b5098-2e1a-4c05-a677-e20af52aee21.jpg" alt=""></image>
</view>
</view>
<view class="layort-h">
<view class="zw-title">
<image style="width:262rpx; height:34rpx;" src="http://img02.camel.com.cn/image/zw_title3.png" alt=""></image>
<text class="more">更多></text>
</view>
<view class="zw-banner">
<image style="width:750rpx; height:376rpx;" src="https://topic.camel.com.cn/module/wap_index_gooutdoor_201709/be8da4f7-2920-4b93-b66e-e053e2272094.jpg" alt=""></image>
</view>
<view class="zw-proul">
<view class="zw-proli">
<image src="https://img01.camel.com.cn/product/image/1F01018/918b822c-76f0-4f29-b3e2-cced7e961e1d.jpg" alt=""></image>
<view class="zw-proli-tips">排湿透气 不怕背着黏糊糊</view>
<view class="zw-proli-info">
<view>骆驼户外登山包</view>
<view class="price-wrap">
<!-- react-text: 158 -->¥
<!-- /react-text -->
<text class="price">178.00</text>
</view>
</view>
</view>
<view class="zw-proli">
<image src="https://img01.camel.com.cn/product/image/A5W3H8101/9f739417-7bfe-49fd-a4d9-dc09eecbc42c.jpg" alt=""></image>
<view class="zw-proli-tips">3秒速开 一眨眼就完成</view>
<view class="zw-proli-info">
<view>第四代自动速开帐篷</view>
<view class="price-wrap">
<!-- react-text: 166 -->¥
<!-- /react-text -->
<text class="price">238.00</text>
</view>
</view>
</view>
</view>
</view>
<view class="layort-h">
<view class="zw-title">
<image style="width:262rpx; height:34rpx;" src="http://img02.camel.com.cn/image/zw_title4.png" alt=""></image>
<text class="more">更多></text>
</view>
<view class="zw-banner">
<image style="width:750rpx; height:376rpx;" src="https://topic.camel.com.cn/module/wap_index_juhui_201709/8e584139-33d7-495a-86fc-af28f919bf0c.jpg" alt=""></image>
</view>
<view class="zw-proul2">
<view class="zw-proli2">
<image src="https://img01.camel.com.cn/product/image/1F01018/918b822c-76f0-4f29-b3e2-cced7e961e1d.jpg" alt=""></image>
<view class="zw-proli-tips">排湿透气 不怕背着黏糊糊</view>
<view class="zw-proli-info">
<view>骆驼户外登山包</view>
<view class="price-wrap">
<!-- react-text: 158 -->¥
<!-- /react-text -->
<text class="price">178.00</text>
</view>
</view>
</view>
<view class="zw-proli2">
<image src="https://img01.camel.com.cn/product/image/A5W3H8101/9f739417-7bfe-49fd-a4d9-dc09eecbc42c.jpg" alt=""></image>
<view class="zw-proli-tips">3秒速开 一眨眼就完成</view>
<view class="zw-proli-info">
<view>第四代自动速开帐篷</view>
<view class="price-wrap">
<!-- react-text: 166 -->¥
<!-- /react-text -->
<text class="price">238.00</text>
</view>
</view>
</view>
<view class="zw-proli2">
<image src="https://img01.camel.com.cn/product/image/A5W3H8101/9f739417-7bfe-49fd-a4d9-dc09eecbc42c.jpg" alt=""></image>
<view class="zw-proli-tips">3秒速开 一眨眼就完成</view>
<view class="zw-proli-info">
<view>第四代自动速开帐篷</view>
<view class="price-wrap">
<!-- react-text: 166 -->¥
<!-- /react-text -->
<text class="price">238.00</text>
</view>
</view>
</view>
<view class="zw-proli2">
<image src="https://img01.camel.com.cn/product/image/A5W3H8101/9f739417-7bfe-49fd-a4d9-dc09eecbc42c.jpg" alt=""></image>
<view class="zw-proli-tips">3秒速开 一眨眼就完成</view>
<view class="zw-proli-info">
<view>第四代自动速开帐篷</view>
<view class="price-wrap">
<!-- react-text: 166 -->¥
<!-- /react-text -->
<text class="price">238.00</text>
</view>
</view>
</view>
</view>
</view>
<view class="layort-h">
<view class="zw-title">
<image style="width:262rpx; height:34rpx;" src="http://img02.camel.com.cn/image/zw_title5.png" alt=""></image>
<text class="more">更多></text>
</view>
<view class="zw-banner">
<image style="width:750rpx; height:376rpx;" src="https://topic.camel.com.cn/module/wap_index_pztravel_201709/fd7fe4df-bace-4b11-9923-d26a7eaeae8e.jpg" alt=""></image>
</view>
<view class="zw-proul">
<view class="zw-proli">
<image src="https://img01.camel.com.cn/product/image/1F01018/918b822c-76f0-4f29-b3e2-cced7e961e1d.jpg" alt=""></image>
<view class="zw-proli-tips">排湿透气 不怕背着黏糊糊</view>
<view class="zw-proli-info">
<view>骆驼户外登山包</view>
<view class="price-wrap">
<!-- react-text: 158 -->¥
<!-- /react-text -->
<text class="price">178.00</text>
</view>
</view>
</view>
<view class="zw-proli">
<image src="https://img01.camel.com.cn/product/image/A5W3H8101/9f739417-7bfe-49fd-a4d9-dc09eecbc42c.jpg" alt=""></image>
<view class="zw-proli-tips">3秒速开 一眨眼就完成</view>
<view class="zw-proli-info">
<view>第四代自动速开帐篷</view>
<view class="price-wrap">
<!-- react-text: 166 -->¥
<!-- /react-text -->
<text class="price">238.00</text>
</view>
</view>
</view>
</view>
</view>
<view class="layort-h">
<view class="zw-title">
<image style="width:262rpx; height:34rpx;" src="http://img02.camel.com.cn/image/zw_title6.png" alt=""></image>
<text class="more">更多></text>
</view>
<view class="zw-banner">
<image style="width:750rpx; height:405rpx;" src="https://topic.camel.com.cn/module/wap_index_yujiagirl_201709/344cc183-61e5-444f-b22c-9c46e699f43f.jpg" alt=""></image>
</view>
<view class="zw-proshow">
<view class="zw-proshow-li">
<image class="zw-proshow-li-img" src="https://img01.camel.com.cn/product/image/A7S1U8135/b45432fc-aa90-4ebd-81b2-970d0b7585c6.jpg" alt=""></image>
<view class="zw-pli-info">
<view class="pli-info-wrap">
<view>
<text class="h2">无缝一体提臀裤</text>
</view>
<view>
<text class="p1">雕塑S迷人身材</text>
</view>
<view class="h1">
<!-- react-text: 228 -->¥
<!-- /react-text -->
<text>229.00</text>
</view>
</view>
</view>
</view>
<view class="zw-proshow-li">
<image class="zw-proshow-li-img" src="https://img01.camel.com.cn/product/image/A7S1Q9117/f4e069a6-c3b3-40db-bd90-dbbfe0abd70b.jpg" alt=""></image>
<view class="zw-pli-info">
<view class="pli-info-wrap">
<view>
<text class="h2">360°防震运动内衣</text>
</view>
<view>
<text class="p1">一体编织成型</text>
</view>
<view class="h1">
<!-- react-text: 236 -->¥
<!-- /react-text -->
<text>56.00</text>
</view>
</view>
</view>
</view>
<view class="zw-proshow-li">
<image class="zw-proshow-li-img" src="https://img01.camel.com.cn/product/image/A7W1Q9106/2e21e361-5e2b-4a4f-94e1-d7827d3baced.jpg" alt=""></image>
<view class="zw-pli-info">
<view class="pli-info-wrap">
<view>
<text class="h2">3D修身裁剪5件套</text>
</view>
<view>
<text class="p1">一穿立变蜜桃臀</text>
</view>
<view class="h1">
<!-- react-text: 244 -->¥
<!-- /react-text -->
<text>58.00</text>
</view>
</view>
</view>
</view>
<view class="zw-proshow-li">
<image class="zw-proshow-li-img" src="https://img01.camel.com.cn/product/image/A7W1X7129/801f0dac-a93a-4ada-916f-87cc6d2106d7.jpg" alt=""></image>
<view class="zw-pli-info">
<view class="pli-info-wrap">
<view>
<text class="h2">活力弹力4件套</text>
</view>
<view>
<text class="p1">包出好三围</text>
</view>
<view class="h1">
<!-- react-text: 252 -->¥
<!-- /react-text -->
<text>219.00</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="layort-h">
<view class="zw-title">
<image style="width:298rpx; height:34rpx;" src="http://img02.camel.com.cn/image/zw_title7.png" alt=""></image>
<text class="more">更多></text>
</view>
<view class="zw-banner">
<image style="width:750rpx; height:376rpx;" src="https://topic.camel.com.cn/module/wap_index_peichild_201709/0c70dad9-f11e-4e2d-9651-ad001bb94cda.jpg" alt=""></image>
</view>
<view class="zw-proul">
<view class="zw-proli">
<image src="https://img01.camel.com.cn/product/image/1F01018/918b822c-76f0-4f29-b3e2-cced7e961e1d.jpg" alt=""></image>
<view class="zw-proli-tips">排湿透气 不怕背着黏糊糊</view>
<view class="zw-proli-info">
<view>骆驼户外登山包</view>
<view class="price-wrap">
<!-- react-text: 158 -->¥
<!-- /react-text -->
<text class="price">178.00</text>
</view>
</view>
</view>
<view class="zw-proli">
<image src="https://img01.camel.com.cn/product/image/A5W3H8101/9f739417-7bfe-49fd-a4d9-dc09eecbc42c.jpg" alt=""></image>
<view class="zw-proli-tips">3秒速开 一眨眼就完成</view>
<view class="zw-proli-info">
<view>第四代自动速开帐篷</view>
<view class="price-wrap">
<!-- react-text: 166 -->¥
<!-- /react-text -->
<text class="price">238.00</text>
</view>
</view>
</view>
</view>
</view>
</view>
|
三、js页面代码如下:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
imgUrls: [
'https://topic.camel.com.cn/module/wap_index_focus_201709/7645c28f-9674-49f0-8490-dca3f6237496.jpg?d=1',
'https://topic.camel.com.cn/module/wap_index_focus_201709/cb445730-dda3-466e-ab17-60f1f6ca1cb7.jpg',
'https://topic.camel.com.cn/module/wap_index_focus_201709/92b890bb-7182-4ba4-8bc7-3ffd7ebbcf1c.jpg'
],
indicatorDots: true,
indicatorColor: '#fff',
indicatorActiveColor: '#d2ab44',
autoplay: true,
interval: 5000,
duration: 500,
circular: true
}
})
|