微信小程序学习笔记

1、swiper组件
swiper组件是实现幻灯片效果的组件，可以显示多张图片的顺序切换。

实现效果

实例代码

index.wxml:
<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>

index.js:
Page({  data: {
    imgUrls:[
       '图片地址',
       '图片地址'
     ],
   }
})

2、小标题（view组件）
在index.wxml中创建新的view模块，再在index.wxss中定义样式

实现效果

实例代码

index.wxml:
  <view class="selection">
      <view class="header">
          <text>精品推荐</text>
          <text class="text-all">全部精品</text>
      </view>
   </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;/*水平居中对齐*/
}
.text-all{
  color: green;/*左边小字颜色*/
  font-size: 10px;
}

3、四宫格内容模块
先设置一个view模块，当作四个内容的总模块，再在其中设置四个view模块，显示单个内容。
在第二级的view模块中插入图片，定义图片大小，再插入一个view模块，在其中输入标题，标题有渐变色半透明背景，位于图片的底部

实现效果

实例代码

index.wxml:
<view class="content">
   <view class="content-item" wx:for="{{contentItems}}">/*循环*/
      <image src="../../images/img1.jpg"/>
      <view class="content-item-text">
         <text>这里是标题</text>
      </view>
   </view>
</view>

index.wxss:
.content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.content-item{
  height: 250rpx;
  width: 45%;
  background-color: goldenrod;
  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: 125rpx;
  width: 98%;
  display: flex;/*使用flex布局，让文字在图片底部*/
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;/*定义字体左右和底部的空格*/
}

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'
     ],
     contentItems:['','','','']
  }
})

4、横板内容模块
先在view模块中大致分为两个板块：header和list，再在list板块中分出图片板块和文字板块

实现效果

实例代码

index.wxml:
<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>

index.wxss:
.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-left:3%;
   padding-right: 3%;
}

.list-item-text-title{
  font-weight: bold;
}

.list-item-text-content{
  font-size: 10px;
  color: #999;
  margin-top: 20rpx;
}```