微信小程序开发前端基础知识二-阿里云开发者社区

微信小程序开发前端基础知识二

2024-02-02 141

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信小程序开发前端基础知识二

3、滚动显示

在这里插入图片描述

3.1、布局 html

<!-- 滚动显示 -->
<scroll-view class="major" scroll-x>
    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng1.png"></image>
      <view class="txt">平面设计</view>
    </navigator>
    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng2.png"></image>
      <view class="txt">室内设计</view>
    </navigator>
    <navigator class="box" url="">
      <image class="pic" src="../../images/kecheng3.png"></image>
      <view class="txt">UI设计</view>
    </navigator>
    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng4.png"></image>
      <view class="txt">影视后期</view>
    </navigator>
    <navigator class="box" url="">
      <image class="pic" src="/images/kecheng5.png"></image>
      <view class="txt">web前端</view>
    </navigator>
</scroll-view>

3.2、布局样式 css

/* 滚动显示 */
.major{
   
   
  white-space: nowrap;/*不换行显示*/
  padding:30rpx 0;
}
.major .box{
   
   
  text-align: center;
  width: 165rpx;
  display:inline-block

}
.major .pic{
   
   
  width: 100rpx;
  height: 100rpx;
}
.major .txt{
   
   
  font-size: 26rpx;
  margin-top: 8rpx;
}

4、作品展示

4.1、布局 html

在这里插入图片描述

<!-- 作品展示 -->
<view class="works">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">学员作品</view>
      <navigator class="more">更多 ></navigator>
    </view>
    <view class="wxMain">
      <navigator class="box" wx:for="{
    
    {worksList}}" wx:key="index">
        <image class="pic" src="{
    
    {item.src}}"></image>
        <view class="ceng">
          <view class="tit">{
  
  {item.title}}</view>
          <view class="line"></view>
          <view class="des">{
  
  {item.desc}}</view>
        </view>
      </navigator>
    </view>
  </view>
</view>

4.2、布局样式 css

/* 学员作品展示 */
.pubTitle{
   
   
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  align-items: center;
  margin-bottom: 40rpx;
}
.pubTitle .txt{
   
   
  font-size: 40rpx;
  height: 100%;
  position: relative;
  padding-left: 20rpx;
}
.pubTitle .txt::before{
   
   
  display: block;
  width: 8rpx;
  height: 34rpx;
  background: #c8020b;
  content:'';
  position: absolute;
  left: 0;
  top: 20%;  
}
.pubTitle .more{
   
   
  font-size: 34rpx;
  color:#666;
}
.works{
   
   
  background-color: #f0f3f8;
  padding: 90rpx 0 70rpx;
}
.wxMain{
   
   
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wxMain .box{
   
   
  width: 344rpx;
  height: 214rpx;
  margin-bottom: 10rpx;
  position: relative;
}
.wxMain .pic{
   
   
  width: 100%;
  height: 100%;
}
.wxMain .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;
  text-align: center;
  padding: 0 20rpx;
  box-sizing: border-box;/*添加内边距padding时需要添加内填充属性*/
}
.wxMain .ceng .tit{
   
   
  font-size: 34rpx;
}
.wxMain .ceng .line{
   
   
  width: 50rpx;
} 
.wxMain .ceng .des{
   
   
  font-size: 24rpx;
  opacity: 0.6;/*透明度*/
  text-transform: uppercase;/*转换成大写*/
  letter-spacing: 5rpx;/*字符间距*/
}

5、行业动态

5.1、布局 html

<!-- 行业动态 -->
<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}}" wx:key="index">
        <view class="pic">
          <image src="/images/xszp1.jpg"></image>
        </view>
        <view class="txt">
          <view class="title">这里是标题部分</view>
          <view class="info">作者：王静<text space="ensp"> - </text>时间：2022-05-01</view>
        </view>
      </navigator>
    </view>
  </view>
</view>

5.2、布局样式 css

/* 行业动态 */
.dynamic{
   
   
  padding:90rpx 0 70rpx;
}
.dyItem{
   
   
  display: flex;
  padding:15rpx 0;
  border: 1rpx dashed #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;
}

6、底部logo

6.1、布局 html

<!-- 底部logo -->
<view class="footer">
  <image src="/images/logo.png" mode="widthFix" class="pic"></image>
  <view class="text">- 高端实训平台 -</view>
</view>

6.2、布局样式 css

/* 底部 */
.footer{
   
   
  padding: 30rpx;
  background:#f2f2f2;
  text-align: center;
}
.footer .pic{
   
   
  width: 180rpx;
}
.footer .text{
   
   
  font-size: 25rpx;
  color: #666;
}