• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序实现首页图片多种排版布局!

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

先来个效果图:

使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式!

直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发!

wxml:

<view class=\'indexcontainer\'>
  <!-- 顶部推荐图片轮播 -->
  <view class=\'selection\'>
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}" wx:key="*this">
          <swiper-item> 
            <image src="{{item}}" class="slide-image" mode=\'scaleToFill\' />
          </swiper-item>
        </block>
    </swiper>
  </view>
  <!-- 第二部分-->
  <view class=\'selection\'>
    <!-- 头部文字 -->
    <view class="header">
      <text style=\'margin-left: 5px;\'>英杰之诗</text>
      <text class=\'all\'>英雄的回忆</text>
    </view>
    <!-- 内容 -->
    <view class=\'content\'>
      <view class=\'content-item\' wx:for="{{contentImgUrls}}" wx:key="url" wx:for-item="item">
        <!-- 图片 -->
        <image src="{{item.url}}" class="slide-image" mode=\'scaleToFill\'/>
        <!-- 图片上的文字说明 -->
        <view class=\'content-item-title\'>
          <text>{{item.title}}</text>
        </view>
      </view>
    </view>
  </view>
  <!-- 第三部分 -->
  <view class=\'selection\'>
    <!-- 头部文字 -->
    <view class="header">
      <text style=\'margin-left: 5px;\'>神庙攻略</text>
      <text class=\'all\'>海拉尔历险记</text>
    </view>
    <!-- 内容 --> 
    <view class=\'list-item\' wx:for="{{HotImgUrls}}" wx:key="url" wx:for-item="item">
      <!-- 文章图片 -->
      <view class=\'list-item-image\'>
        <image src=\'{{item.url}}\'  class="slide-image" mode=\'scaleToFill\'></image>
        <!-- 作者头像 -->
        <image src=\'{{item.head}}\'  class="avatar" mode=\'scaleToFill\'></image>
      </view>
      <!-- 文章内容 -->
      <view class=\'list-item-text\'>
        <view class=\'list-item-text-title\'>
          <text>{{item.title}}</text>
        </view>
        <view class=\'list-item-text-context\' >
          <text>{{item.content}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

  js:

Page({
  data: {
    //顶部轮播图
    imgUrls: [
      \'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=63967211,2305810881&fm=27&gp=0.jpg\',
      \'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3265697507,322543478&fm=27&gp=0.jpg\',
      \'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=985354164,1752304932&fm=26&gp=0.jpg\'
    ],
    //第二部分数据数组
    contentImgUrls:[
      {
        title:\'塞尔达公主\',
        url:\'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2716688360,1326705556&fm=27&gp=0.jpg\'
      },{
        title:\'卓拉公主-弥法老婆\',
        url:\'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2527034280,2956682531&fm=27&gp=0.jpg\'
      },{
        title:\'塞尔达公主\',
        url:\'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=689739696,3300191086&fm=27&gp=0.jpg\'
      },{
        title:\'塞尔达公主\',
        url:\'http://img4.imgtn.bdimg.com/it/u=4258802685,2724420509&fm=26&gp=0.jpg\'
      }
    ],
    //死三部分数据
    HotImgUrls: [
      {
        //头像地址,文字标题,文字内容,图片地址
        head:\'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg\',
        title:\'海拉尔平原的冒险\',
        content: \'海拉尔区是隶属内蒙古自治区呼伦贝尔市的一个市辖区,是呼伦贝尔市政治、经济、文化中心。该区位于内蒙古自治区东北部,区域范围为东经119°30′48〃— 120°35′36〃;北纬49°5′44〃—19°27′15〃,面积1440平方公里。\',
        url: \'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1532027772,1266945951&fm=27&gp=0.jpg\'
      }, 
      {
        head: \'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg\',
        title: \'拯救塞尔达公主吧\',
        content: \'卓拉公主-弥法老婆\',
        url: \'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2404695142,3634522143&fm=27&gp=0.jpg\'
      }, 
      {
        head: \'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg\',
        title: \'快速开地图塔\',
        content: \'塞尔达公主\',
        url: \'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2225874892,982427892&fm=26&gp=0.jpg\'
      }, 
      {
        head: \'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg\',
        title: \'滑翔伞获得攻略\',
        content: \'塞尔达公主\',
        url: \'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4216945098,3102493232&fm=26&gp=0.jpg\'
      }
    ],
    indicatorDots: true, //显示面板显示点
    autoplay: false,  //自动切换
    interval: 5000,  //切换时间
    duration: 1000  //动画时长
  },

  css样式:

page{
    height: 100%;
}
.selection{
  border-bottom: 6px solid #ddd;
}
.indexcontainer{
  width: 100%;
  height: 100%;
}
.selection{
  margin-top: 10px;
}
.slide-image{
  width: 100%;
  height: 100%;
}
.header{
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: green;
  display: flex;
  justify-content: space-between;
  height: 30px;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-top: 10px;
  margin-bottom: 10px;
}
.all{
  margin-right: 5px;
  color: green;
}
.content{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.content-item{
  width: 47%;
  height: 280rpx;
  background-color: red;
  margin: 5px;
  /* 绝对定位的父级必须要定位 */
  position: relative;
}
.content-item-title{
  position: absolute; /*绝对定位,文字覆盖图片上*/
  color: white;
  bottom: 0px; /* 位置在父级元素底部 */
  font-size: 17px;
  width: 98%;
  height: 100rpx; /* 设置容器高度,显示渐变的高度 */
  text-align: center;
  /* 背景渐变:bottom:从下到上,右0.8向0透明渐变 */
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));
  display: flex; /* flex布局,控制容器内文字元素在底部 */
  flex-direction: column;
  justify-content: flex-end;
  padding: 1% 1% 1% 1%;
}
.list-item{
  width: 100%;
  height: 500rpx;
}
.list-item-image{
  width: 100%;
  height: 300rpx;
  position: relative;
}
.list-item-text{
  width: 96%;
  height: 200rpx;

}
.avatar{
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  position: absolute;
  bottom: -45rpx;
  right: 50rpx;
}
.list-item-text{
  margin-top: 10px;
  padding-left: 2%;
  padding-right: 2%;
}
.list-item-text-context{
  font-size: 12px;
  margin-top: 8px;
  color: #999;
}

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
01. pigx微信小程序登录流程发布时间:2022-07-18
下一篇:
微信小程序从零开始开发步骤(七)引入外部js 文件发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap