微信小程序汽车品牌配置简洁页面样式设计制作开发教程

本文给大家带来的是微信小程序选车中心车型大全展示列表页面样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
    <view class="detail_cont">
        <text id="detail">奥迪品牌简介</text>
    </view>
<!--汽车简介内容-->
    <view class="info_cont">
        <text id="info">
            奥迪(Audi)是一个国际著名豪华汽车品牌，作为高技术水平、质量标准、创新能力、以及经典车型款式的代表，奥迪是世界最成功的汽车品牌之一。公司总部设在德国的英戈尔施塔特。
        </text>
    </view>
<!--汽车图片-->
    <view class="car_cont">
        <swiper autoplay="true" duration="{{duration}}" class="car_pic">
            <block wx:for="{{imgUrls}}">
                <swiper-item>
                    <image src="{{item}}" style="width: 100%; height: 100%"></image>
                </swiper-item>
            </block>
        </swiper>
    </view>
<!--汽车价格&车名-->
    <view class="name_cont">
        <text class="car_name">奥迪R8</text>
        <text class="car_price">厂家指导价：182.3 - 253.8万</text>
    </view>
<!--汽车配置-->
    <view class="car_detail">
        <text>车型名称 : 奥迪R8 V10 Performance</text>
    </view>
    <view class="car_detail">
        <text>级别 : 跑车</text>
    </view>
    <view class="car_detail">
        <text>发动机 : 5.2LL449KW</text>
    </view>
    <view class="car_detail">
        <text>车身结构 : 2门 2座 跑车</text>
    </view>
    <view class="car_detail">
        <text>最高车速 : 330(km/h)</text>
    </view>

    <button id="btn" size="mini" type="primary" loading="{{btn_load}}" plain="{{plain}}" bindtap="setLoad">查看更多配置</button>

    <loading hidden="{{ hidden }}">
        Loading...
    </loading>

</view>

二、wxss样式文件代码如下：

.detail_cont {
    margin: 10px;
    margin-bottom: 0px;
}

#detail {
    font-weight: bolder;
}

.info_cont {
    margin: 0px 10px;
}

#info {
    color: #888888;
}

.car_cont {
    margin: 10px;
    height: 225px;
    width: auto;
}
.car_pic {
    height: 225px;
}

.name_cont {
    margin-top: 10px;
}

.car_name {
    font-weight: bold;
    margin-left: 10px;
}
.car_price {
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    color: #FF6600;
    font-weight: bold;
}

.car_detail {
    border-top: 1px solid #C0C0C0;
    margin-top: 10px;
    margin-left: 10px;
}

#btn {
    width: 93%;
    margin: 10px;
}

三、js页面代码如下：

Page({
    data: {
        imgUrls: [
            "http://img1.xcarimg.com/b63/s7736/c_20160511153957007951768554208.jpg",
            "http://img1.xcarimg.com/b63/s7736/c_20160511153948903325305587219.jpg",
            "http://img1.xcarimg.com/b63/s7736/c_20160324172935416694857347161.jpg",
            "http://img1.xcarimg.com/b63/s7736/c_20160918132004359674866549395.jpg",
            "http://img1.xcarimg.com/b63/s7736/c_20160918132002131163573867539.jpg",
            "http://img1.xcarimg.com/b63/s7736/c_20160729071450170685818327422.jpg"
        ],
        duration: 3000,

        btn_load: false,
        plain: true,

        hidden: false
    },

    setLoad: function() {
        this.setData({
            btn_load: !this.data.btn_load
        })   
    },
    // 页面加载显示事件
    loadingChange: function() {
        setTimeout(() => {
            this.setData({
                hidden: true
            })
        }, 1200)
    },
    // 页面初始化执行
    onLoad() {
        this.loadingChange()
    }
})

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