1、如何插入能自动播放图片的幻灯片?
使用swiper组件,再在index.js中定义图片地址
实现效果
实例代码:
index.wxml:
<view class="selection" style="border:0;">
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
</view>
index.js:
Page({
data: {
imgUrls:[
'https://i.loli.net/2020/02/21/gtN1icMTrALFPfb.jpg',
'https://i.loli.net/2020/02/21/42pTOevfVio1jWs.png',
'https://i.loli.net/2020/02/21/9elxq8TuMvWtRgs.jpg'
],
}
})
2、如何实现左边带有绿线,右边有小字的头部标题?
将标题定为特定的view模块,并使用flex布局
实现效果
实例代码:
index.wxml:
<view class="header">
<text>精品推荐</text>
<text class="text-all">全部精品</text>
</view>
index.wxss:
.header{
border-left-width: 2px;
border-left-style: solid;
border-left-color: limegreen;
display: flex;
justify-content: space-between;
align-items: center;
height: 60rpx; padding-left: 30rpx;
padding-right: 30rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.text-all{
color: limegreen;
font-size: 10px;
}
3、如何实现四宫格布局的内容?
先在内容板块中插入四个view模块,定义第一层样式为flex布局,方向默认按行排列,换行,第二层样式为高250rpx,宽45%,间距2px,水平方向居中对齐
实现效果
实例代码:
index.wxml:
<view class="content">
<view class="content-item">
1
</view>
<view class="content-item">
2
</view>
<view class="content-item">
3
</view>
<view class="content-item">
4
</view>
</view>
index.wxss:
.content{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.content-item{
height: 250rpx;
width: 45%;
margin: 2px;
background-color: goldenrod;
}
4、如何插入图片?
用image在第二层view中插入图片,再将宽和高定义样式为100%
实现效果
5、如何实现半透明渐变色白字标题?
使用绝对布局,离底部0px,对content-item进行定位,字体颜色为白色,字体大小10px,背景用linear-gradient属性,使用flex布局,方向垂直,对齐方式底部开始
实现效果
实例代码
<view class="content-item-text">
<text>这里是标题</text>
</view>
.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: 125rpx;
width: 90%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 3%;
}
6、如何实现横板展示的内容?
先创建新的view模块,再在其中插入两个view模块,分别是标题、内容,再在内容模块中插入两个view模块,分别是图片、文字。
标题样式同上。内容模块样式高500rpx,宽100%,图片模块高300rpx,宽100%,图片样式宽100%,高100%,头像样式为圆形,位置为绝对,离底部-50rpx,宽,高均为100rpx,距离右边50rpx,文字模块高200rpx,宽100%,距离顶部30rpx,padding为0 3%,小字样式为字体大小10px,颜色#999,距离顶部20rpx,标题样式为粗体
实现效果:
实例代码
<view class="selection">
<view class="header">
<text>热门评测</text>
<text class="text-all">全部评测</text>
</view>
<view class="list-item" wx:for="{{listItems}}">
<view class="list-item-images">
<image src="../../images/img2.jpg" class="list-item-images-img"/>
<image src="../../images/avatar.jpeg" class="avatar"/>
</view>
<view class="list-item-text">
<view class="list-item-text-title">
<text>标题标题标题标题</text>
</view>
<view class="list-item-text-content">
<text>这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,</text>
</view>
</view>
</view>
</view>
.list-item{
height: 500rpx;
width: 100%;
}
.list-item-images{
height: 300rpx;
width: 100%;
position: relative;
}
.list-item-images-img{
height: 100%;
width: 100%;
}
.avatar{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
position: absolute;
bottom: -50rpx;
right: 50rpx;
}
.list-item-text{
height: 200rpx;
width: 96%;
margin-top: 30rpx;
padding:0 3%;
}
.list-item-text-title{
font-weight: bold;
}
.list-item-text-content{
font-size: 10px;
color: #999;
margin-top: 20rpx;
}
7、如何分隔每个模块?
设置selection的样式,底部边框,宽4px,实线,颜色为#ddd
.selection{
border-bottom: 4px solid #ddd;
}