app.json
{
"pages":[
"pages/index/index"
],
"window":{
"navigationBarBackgroundColor": "#5C4338"
}
}
index.wxml
<view>
<!-- vertical="true" -->
<swiper indicator-dots="true" autoplay="true" interval="4000" circular="true">
<swiper-item>
<image src="/images/banner1.png"></image>
</swiper-item>
<swiper-item>
<image src="/images/banner2.png"></image>
</swiper-item>
<swiper-item>
<image src="/images/banner3.png"></image>
</swiper-item>
</swiper>
<view class="Sec1">
<view class="sec1">
<image src="/images/pg.jpg" class="sec1_img"></image>
<text class="sec1_date">2017.11.16</text>
</view>
<view>
<image src="/images/sg1.jpg" class="sec2_img"></image>
</view>
<view class="sec3">
<text>石榴,红红的,好吃。</text>
</view>
<view class="sec4">
<image src="/images/icon1.jpg"></image>
<text>45</text>
<image src="/images/icon2.jpg"></image>
<text>96</text>
</view>
</view>
<view class="Sec1">
<view class="sec1">
<image src="/images/pg.jpg" class="sec1_img"></image>
<text class="sec1_date">2017.11.16</text>
</view>
<view>
<image src="/images/sg1.jpg" class="sec2_img"></image>
</view>
<view class="sec3">
<text>石榴,红红的,好吃。</text>
</view>
<view class="sec4">
<image src="/images/icon1.jpg"></image>
<text>45</text>
<image src="/images/icon2.jpg"></image>
<text>96</text>
</view>
</view>
</view>
index.wxss
page{
background: #ddd;
}
swiper,.Sec1{
background: #FFF;
}
swiper image{
width: 100%;
}
.Sec1{
margin-top: 50rpx;
}
.sec1{
margin-left: 20rpx;
}
.sec1_img{
width: 60rpx;
height: 60rpx;
vertical-align: middle;
}
.sec1_date{
display: inline-block;
margin-left: 20rpx;
vertical-align: middle;
padding-top: 20rpx;
}
.sec2_img{
width: 100%;
}
.sec3{
margin-left: 10rpx;
}
.sec3>text{
font-size: 30rpx;
}
.sec4{
margin-left: 10rpx;
}
.sec4>image{
width: 50rpx;
height:50rpx;
vertical-align: middle;
}
.sec4>text{
vertical-align: middle;
}
index.json
{
"navigationBarTitleText": "水果市场"
}
index.js
const app=getApp()
Page({
})
效果图:
疑惑:class Sec1改成其他的,页面不对了。