微信小程序样式实战总结1

1.微信小程序样式总结

1.1 图片的格式设置

border: 1px solid red;			边框为1px 并且是实线 红色的
justify-conent: space-between;  将元素分布在左右两边，两端对齐
display: flex: 					将容器中的元素显示在一行 
align-items: 					将元素放置在容器中间

在wxml中 image标签下有mode=“heightFix”是根据高度自动调节大小，此外还有如下的取值：
	scaleToFill 				缩放模式，不保持纵横比缩放图片，是图片宽高完全拉伸至填满image元素
	widthFix 					缩放模式宽度不变高度组东变化使原图宽高比不变
	
position: absolute; 			将原来的图片显示出来而隐藏自己的位置
但是父标签必须将position设置为relative 才能实现该效果，同时opacity: 0; 这样搭配才是比较理想的。

@keyframes dh{
  0%,50%,100%{ opacity: 1;}
  25%{ opacity: 0;}
} 
#动画效果 opacity为1 说明显示  值为0 说明不显示
.kefu {position: relative; animation: dh linear 1s infinite alternate;}
在需要的组件下面加上  animation即可，dh为动画的拼音缩写，变量名
								linear 说明动画头到动画尾速度相同
								alternate 是animation-direction的属性：定义是否循环交替反向播放动画。
								1s为时间  infinite说明无限循环下去。

1.2 轮播图样式设置

<view class="banner">
  <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular="true" autoplay interval="1000">
    <swiper-item><image src="/images/banner1.jpg" /></swiper-item>
    <swiper-item><image src="/images/banner2.jpg" /></swiper-item>
    <swiper-item><image src="/images/banner3.jpg" /></swiper-item>
  </swiper>
</view>

其中 indicator-color说明底部轮播的小点 rgba(255,255,255,0.5) 为半透明的小点 circular为循环播放 autoplay  interval为轮播的时间

.banner { width: 100%; height: 295rpx;}
.banner swiper{ height: 100%; width: 100%;}
.banner image{ width: 100%; height: 295rpx;} 

navigator 的open-type 指的是页面跳转的方式 非导航栏的页面跳转可以忽略

1.3 navigator的滑动效果设置

<scroll-view class="major" scroll-x>
  <view class="majorCon">
    <navigator class="box" url="">
      <image class="pic" src="/images/1.png"></image>
      <view class="txt">xxx1</view>
    </navigator>
    <navigator class="box" url="">
      <image class="pic" src="/images/2.png"></image>
      <view class="txt">xxx2</view>
    </navigator>
    <navigator class="box" url="">
      <image class="pic" src="/images/3.png"></image>
      <view class="txt">xxx3</view>
    </navigator>
    <navigator class="box" url="">
      <image class="pic" src="/images/4.png"></image>
      <view class="txt">xxx4</view>
    </navigator>
    <navigator class="box" url="">
      <image class="pic" src="/images/5.png"></image>
      <view class="txt">xxx5</view>
    </navigator>
  </view>
</scroll-view>
scroll-x 可以横向滑动 这里有两个组件 每个navigator是一个组件还有一个是装5个小盒子的组件。

.major {white-space: nowrap; padding: 30rpx 0}
.major .box{text-align: center; width: 170rpx; display: inline-block}
.major .pic{width: 100rpx; height: 100rpx;}
.major .txt{font-size: 26rpx; margin-top: 10rpx;}
/*主组件中  white-space 是将五个小盒子放在一行 
		text-align   将元素放在位置中间
		margin-top 文字离顶部的高度
		display: inline-block 将元素放置在一行
white-space 和 inline-block的区别是 white-space是将元素放置在一行，如果有多余的就会显示在下一行
没有inline-block 元素会分布在五行 一行一个  没有white-space的话，元素会分布在两行，第一行四个四二行一个*/

padding的用法之外想到box-sizing 想到是都将其格式转化为内填充

1.4 主体内容显示样式设计

<view class="works">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">主题内容</view>
      <navigator class="more">更多 ></navigator>
    </view>
    <view class="wkMain">
        <navigator class="box" wx:for="{{8}}">
          <image class="pic" src="/images/1.jpg"></image>
          <view class="ceng">
            <view class="tit">格式1</view>
            <view class="line"></view>
            <view class="des">Form one</view>
          </view>
        </navigator>
    </view>
  </view>
</view>

.works{ background: #eee; padding: 90rpx 0 70rpx;}
.wkMain{display: flex; flex-wrap: wrap; justify-content: space-between;}
.wkMain .box{ width: 344rpx; height: 214rpx; margin-bottom: 10rpx; position: relative;}
.wkMain .pic{width: 100%; height: 100%;}
.wkMain .ceng{ width: 100%; height: 100%; background: rgba(0,0,0,0.5);position: absolute; top: 0; left: 0;
color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20rpx; box-sizing: border-box; text-align: center;}
.wkMain .ceng .tit{font-size: 34rpx;}
.wkMain .ceng .line{width: 50rpx; height: 2rpx; background: #fff; margin: 10rpx 0 20rpx;}
.wkMain .ceng .des{opacity: 0.6; text-transform: uppercase; font-size: 24rpx; letter-spacing: 5rpx;}
/*大的框架背景颜色为黑色，padding是内边距 方向分别为上右下左
display将元素显示在一行 flex-wrap 可以换行 space-between 将元素分布在左右两端
position:relative 表示图片可以与其他元素重合显示
ceng的作用就是将文字显示在图片上方，flex-direction:column 是层内元素竖行排列 同时显示在一行 align-items 将元素布局在中间 
padding和box-sizing 保持元素在盒子内为内填充
*/

1.5 布局设置

<view class="dynamic">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">行业动态</view>
      <navigator class="more">更多 ></navigator>
    </view>
    <view class="dyMain">
      <navigator class="dyItem" wx:for="{{5}}">
        <view class="pic">
          <image src="/images/xszp4.jpg"></image>
        </view>
        <view class="txt">
          <view class="title">这里是标题的部分</view>
          <view class="info"><text>作者：</text>张三<text space="ensp"> - </text><text>时间：</text> 2021-03-04</view>
        </view>
      </navigator>
    </view>
  </view>
</view>

.dynamic{ padding: 90rpx 0 70rpx;}
.dyItem {display: flex; padding:15rpx 0; border: 1rpx dotted #f4f4f4; justify-content: space-between;}
.dyItem .pic{width: 230rpx; height: 150rpx;}
.dyItem .pic image{width: 100%; height: 100%;}
.dyItem .txt{width: 440rpx; display: flex; flex-direction: column; justify-content: space-between;}
.dyItem .title{ font-size: 34rpx;}
.dyItem .info{ font-size: 26rpx; color: #888;}
.dyItem .info text{ font-size: 22rpx;}

参考CSDN博客

top、margin-top的区别：
1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。
2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。

ft、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。
2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。