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

weixin_33937778

于 2019-01-07 17:18:00 发布

阅读量8.3k

点赞数 8

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/houzheng/p/10234397.html

版权

本文展示了如何在微信小程序中通过flex布局和绝对定位技术实现首页图片的多种排版布局。提供了详细的wxml、js和css代码，并附带注释，有助于开发者快速理解和应用。

摘要由CSDN通过智能技术生成

先来个效果图:

使用技术主要是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">
        <!--