本次主要学习页面的一些基本布局
本次页面布局分成三段,第一段,屏幕上的滑动页面
(原谅我电脑上没有正常图片hiahiahia)
<view class="selection">
<swiper indicator-dots="true"
autoplay="true" interval="3000" duration="1000">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item > <image src="2077.png"></image> </swiper-item>
<swiper-item > <image src="timg.jpg"></image> </swiper-item>
<swiper-item > <image src="首杀.jpg"></image> </swiper-item>
</block>
</swiper>
</view>
.selection{ border-bottom: 2px solid #ddd;}
需要注意的是,wx:for这个条件渲染,并不是必须使用的,因为教程里用了,所以我也使用了,我对条件渲染这个内容还不是特别精通。
如有错误,还请指正。
以上,滑动页面就做好了
如果需要设置更多关于swiper的属性,可以自行去官网查看。
下面来看第二块布局
(我就全部用一张图片了,电脑里图片实在不多)
代码
<view class="selection">
<view class="header"><text>精品推荐</text>
<text class="text-all">全部精品</text></view>
<view class="content">
<view class="content-item"><image src="2077.png"></image><view> <text class="content-item-text">赛博朋克2077</text> </view></view>
<view class="content-item"><image src="2077.png"></image><view> <text class="content-item-text">赛博朋克2077</text> </view></view>
<view class="content-item"><image src="2077.png"></image><view> <text class="content-item-text">赛博朋克2077</text> </view></view>
<view class="content-item"><image src="2077.png"></image><view> <text class="content-item-text">赛博朋克2077</text> </view></view>
</view>
</view>
css
.header{ border-left-width: 2px;
border-left-style: solid;
border-left-color: limegreen;
display: flex;
justify-content: space-between;
align-items: center;
},
.text-all{ color: greenyellow; font-size: 10px;},
.content{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.content-item{height: 250rpx;width: 45%;margin: 2px;position: relative;}
.content-item image{ width: 100%; height: 100%;}
.content-item-text{ position: absolute; bottom: 0px;color: white;font-size: 10px;background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));height: 125px;width:98%;display: flex;flex-direction: column;justify-content: flex-end;padding-left: 1%;padding-right: 1%;padding-bottom: 1%;}
以上,第二块实现,这里到没什么需要特别注意的,好好调整页面颜色,让他看起来更顺眼一点。
第三块
还是熟悉的图片
<view class="selection">
<view class="header"><text>热门评测</text><text class="text-all">全部评测</text></view>
<view class="list-item">
<view class="list-item-images">
<image src="2077.png" ></image><image src="timg.jpg" class="avater"></image>
</view>
<view class="list-item-text" >
<view class="list-item-text-title"> <text>标题</text> </view><view class="list-item-text-content"> <text>内容赛博朋克2077</text> </view>
</view>
</view>
</view>
css
.list-item{ height: 500rpx; width: 100%;}
.list-item-image{ height: 300rpx; width: 100%; position: relative;}
.list-item-image image{ height: 100%; width: 100%; }
.list-item-text{ height: 200rpx; width: 96%;margin-top: 20rpx;padding-left: 2%;padding-right: 2%;}
.avater{ width: 100rpx; height: 100rpx; border-radius: 50%; position: absolute; bottom: -50rpx; right: 30px; top: 630px;}
.list-item-text-content{ font-size: 10px; color: #999; margin-top: 20rpx;}
以上,第三块布局完成。
需要注意的是,相对布局和绝对布局,两者相辅相成。
相对布局要注意的是,与之相称的是哪一块绝对布局。
到此,三块布局完成,剩下就是需要微调了。
新人初学,如有错误,请多多指正。