本文给大家带来的是微信小程序汽车小程序车型信息搜索页面样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="wrapper">
<view class="nav clearfix">
<text>
综述
</text>
<text>
配置
</text>
<text>
经销商
</text>
<text>
图片
</text>
</view>
<view class="content">
<!--按车型/按颜色start-->
<view class="deptsel-type">
<view class="conditions">
<view class="txt">按车型：</view>
<navigator url="javascript:" class="analog-sel js-cartype" data-id="">
<text class="inner-txt">不限车型</text>
<icon class="icon-rt">e</icon>
</navigator>
</view>
<view class="conditions">
<view class="txt">按颜色：</view>
<navigator url="javascript:" class="analog-sel js-getcolor" data-id="0">
<text class="inner-txt">不限颜色</text>
<icon class="icon-rt">e</icon>
</navigator>
</view>
</view>
<!--按车型/按颜色end-->
<!--标题start-->
<view class="article-tabs">
<view>
<navigator url="//a.xcar.com.cn/photo/148_0_0/#display" data-type="0" class="cur">全部</navigator>
</view>
<view>
<navigator url="//a.xcar.com.cn/photo/148_1_0/#display" data-type="1" class="">外观</navigator>
</view>
<view>
<navigator url="//a.xcar.com.cn/photo/148_2_0/#display" data-type="2" class="">细节</navigator>
</view>
<view>
<navigator url="//a.xcar.com.cn/photo/148_3_0/#display" data-type="3" class="">座椅</navigator>
</view>
<view>
<navigator url="//a.xcar.com.cn/photo/148_4_0/#display" data-type="4" class="">中控</navigator>
</view>
<view>
<navigator url="//a.xcar.com.cn/photo/148_5_0/#display" data-type="5" class="">其他</navigator>
</view>
<view>
<navigator url="//a.xcar.com.cn/photo/148_6_0/#display" data-type="6" class="">重要细节</navigator>
</view>
</view>
<!--标题end-->
<!--区域start-->
<view class="picture-wrap">
<view class="module-title">
<navigator href="//a.xcar.com.cn/photo/148_1_0#display" class="more">更多
<icon class="icon-bg">e</icon>
</navigator>
<text class="txt">外观(166张)</text>
</view>
<!--图片列表 -->
<view class="picture-list clearfix">
<view>
<navigator url="//a.xcar.com.cn/photo/148-1/3134820.html#zoneclick=102781" class="img-wrap lazy loaded" style="background-image: url('http://img1.xcarimg.com/b22/s8593/20170222111121751871854561316.jpg?imageView2/1/w/240/h/180/'); background-size: 100%; background-color: transparent;">
<img src="http://img1.xcarimg.com/b22/s8593/20170222111121751871854561316.jpg?imageView2/1/w/240/h/180/" alt="" width="105" height="79" />
</navigator>
</view>
</view>
</view>
<!--区域end-->
</view>
</view>
|
二、wxss样式文件代码如下：
view {
font-family: "534E65877EC69ED1", Helvetica, Arial, sans-serif;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
view, text {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
word-break: break-all;
outline: none;
}
navigator {
color: #444;
line-height: inherit;
display: block;
text-decoration: none;
outline: none;
-webkit-text-size-adjust: none;
}
.wrapper {
background: #f3f3f3;
overflow: hidden;
}
.nav {
margin-top: 0 !important;
background: #fff;
height: 68rpx;
}
.nav text {
width: 25%;
float: left;
font-size: 30rpx;
height: 68rpx;
line-height: 23rpx;
color: #444;
text-align: center;
border-bottom: 1rpx solid #e8e8e8;
border-right: 1rpx solid #e8e8e8;
}
.content {
background-color: #f3f3f3;
}
.deptsel-type {
padding: 20rpx 30rpx 0 30rpx;
}
.deptsel-type .conditions {
position: relative;
padding: 0 0 20rpx 112rpx;
}
.deptsel-type .txt {
position: absolute;
left: 0;
font-size: 28rpx;
line-height: 65rpx;
color: #444;
}
.deptsel-type .analog-sel {
position: relative;
height: 65rpx;
border: 1rpx solid #eee;
background: #fff;
-webkit-border-radius: 5rpx;
-moz-border-radius: 5rpx;
border-radius: 5rpx;
text-align: center;
}
.deptsel-type .analog-sel .inner-txt {
font-size: 28rpx;
line-height: 65rpx;
color: #999;
}
.deptsel-type .analog-sel .icon-rt {
position: absolute;
right: 30rpx;
top: 20rpx;
font-size: 24rpx;
color: #999;
}
.article-tabs {
height: 86rpx;
border-bottom: 1rpx solid #eee;
background: #fff;
}
.article-tabs view {
float: left;
width: 16.66%;
text-align: center;
}
.article-tabs view {
width: 13.3%;
}
.article-tabs view navigator {
display: inline-block;
padding: 8rpx;
font-size: 30rpx;
line-height: 68rpx;
color: #444;
}
.article-tabs view navigator.cur {
border-bottom: 2rpx solid #3572ce;
color: #3572ce;
}
.article-tabs view:last-child {
width: 19%;
}
.wrapper .content .picture-wrap {
background: #fff;
margin-top: 20rpx;
}
.picture-wrap .module-title {
border-bottom: 1rpx solid #eee;
padding: 0 30rpx;
}
.module-title .more {
float: right;
font-size: 28rpx;
line-height: 8rpx;
color: #999;
}
.icon-bg, .icon-rt {
display: inline-block;
width: 14rpx;
height: 22rpx;
margin: 0 0 0 10rpx;
font-size: 24rpx;
background:url('Images/arraw.png') no-repeat;
}
.module-title .txt {
font-size: 32rpx;
line-height: 80rpx;
color: #444;
}
.picture-wrap .module-title .txt {
font-size: 28rpx;
font-weight: normal;
}
.picture-wrap .picture-list {
padding: 30rpx 30rpx 0 30rpx;
margin-left: -30rpx;
}
.picture-wrap .picture-list view {
float: left;
width: 33.33%;
padding: 0 0 30rpx 30rpx;
}
.lazy {
display: block;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAACrAQMAAACqt/xfAAAABlBMV…/WHtc0CfaU77OX7PXsBfpsaAPVXkHI3pCnfIFekJeL78N3mFumqDbUgTgAAAAASUVORK5CYII=) center center no-repeat #eee;
background-size: 70px auto;
-webkit-background-size: 70px auto;
-moz-background-size: 70px auto;
}
img {
width: 100%;
border: 0;
vertical-align: top;
}
|
.jpg)
.jpg)
