微信小程序骆驼优品手机商城首页样式设计制作开发教程 立即下载
首页 > 小程序教程 > 微信小程序骆驼优品手机商城首页样式设计制作开发教程

微信小程序骆驼优品手机商城首页样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序骆驼优品手机商城首页样式设计制作开发教程，制作好以后效果图如下：
一、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
    }
})

模板简介：该模板名称为【微信小程序骆驼优品手机商城首页样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 17,191次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-05
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 微信公众平台 微信图片 企业网站 微信文章 单页式简历模板 微信素材 微信模板 响应式 自适应
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 429
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 506
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,735
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,083
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,442
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,264
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备 42010602001367号 懒人模板-Copyright © 2023 版权所有