微信小程序-First Demo

废话不讲直接上代码和效果

• 代码

---

1. index.js 页面是加载的图片信息数据

	//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    imgUrls: [
      '/images/1.jpg',
      '/images/2.jpg',
      '/images/3.jpg',
      '/images/4.jpg',
      '/images/5.jpg',
      '/images/6.jpg',
      '/images/7.jpg'
    ],
    contentItem: ['','','',''],
    listtItems: ['', '', '', '', '', '', '', '']
  }
})

2. index.wxml是页面结构代码

	<view class="page-body">
    <view class="selection">
      <swiper indicator-dots="true"
        autoplay="true" interval="4000" duration="1000">
        <block wx:for="{{imgUrls}}">
          <swiper-item>
            <image src="{{item}}" width="355" height="750"/>
          </swiper-item>
        </block>
      </swiper>
    </view>

   <view class="selection">
    <view class="header">
      <text>精品推荐</text>
      <text class="text-all">全部精品</text>
    </view>

    <view class="content">
      <view class="content-item" wx:for="{{contentItem}}">
        <image src="../../images/img1.jpg"/>
        <view class="content-item-text">
          <text>这里是标题</text>
        </view>
      </view>
    </view>
   </view>

    <view class="selection">
      <view class="header">
      <text>热门评测</text>
      <text class="text-all">全部评测</text>
    </view>

    <view class="list-item" wx:for="{{listtItems}}">
      <view class="list-item-images">
        <image src="../../images/img2.png"/>
        <image src="../../images/avata.jpg" class="avata"/>
      </view>
        <!-- <view class="list-item-text1">  
      </view> -->
      <view class="list-item-text">
        <view class="list-item-text-title">
          <text>API网关涵盖的基本功能</text>
        </view>
        <view class="list-item-text-content">
          <text>文章中，我们从单体系统到微服务系统演变，引入了API网关的概念，紧接着介绍了API Gateway的基本功能，以及展示一个线上生产网关的架构示意图。通过本片文章，可以对API Gateway的内容有一个基本的认知
</text>
        </view>
      </view>
    </view>
    </view> 
  </view>

3. index.wxss是样式代码

	.selection{
  border-bottom: 2px solid #ddd;
}

.header{
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: limegreen;
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 60rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.text-all{
  color: green;
  font-size: 15px;

}
.content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.content-item{
  height: 250rpx;
  width:45%;
  background-color: white;
  margin: 5rpx;
  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.5),rgba(0,0,0,0));
  height: 125rpx;
  width:98%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
}
.list-item{
  height:800rpx;
  width: 100%;
  background-color: black;
}
.list-item-images{
  height:550rpx;
  width: 100%;
  position: relative;
}
.list-item-images iamge{
  height:100%;
  width: 100%;
}
.avata{
  width:35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  bottom: -20px;
  right: 10rpx;

}
.list-item-text{
  height:250rpx;
  width: 96%;
  background-color: white;
  margin-top: 20rpx;
  padding-left: 2%;
  padding-right: 2%;
}
.list-item-text-content{
  font-size: 10px;
  color: #999;
   margin-top: 20rpx;
}

---

• 效果图

完结