微信小程序 问题解决过程

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;
}