知识

index.js //pages/junlebao/index.js Page ( { /** *页面的初始数据 */ data : { items : [ { id : 1 , imageUrl : http://pic.lsybyb.com/yun/JLB/3.png , content : }, { id : 2 , imageUrl : http://pic.lsybyb.com/yun/JLB/4.png , content : }, {

您当前位置>主页 > 知识 > 小程序 >

微信小程序排版

发表时间:2020-07-23 11:11

文章来源:admin

浏览次数:


index.js

// pages/junlebao/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "items": [{
        "id": "1",
        "imageUrl": "http://pic.lsybyb.com/yun/JLB/3.png",
        "content": ""
      },
      {
        "id": "2",
        "imageUrl": "http://pic.lsybyb.com/yun/JLB/4.png",
        "content": ""
      },
      {
        "id": "3",
        "imageUrl": "http://pic.lsybyb.com/yun/JLB/5.png",
        "content": ""
      },
      {
        "id": "4",
        "imageUrl": "http://pic.lsybyb.com/yun/JLB/6.png",
        "content": ""
      },
      {
        "id": "5",
        "imageUrl": "http://pic.lsybyb.com/yun/JLB/7.png",
        "content": ""
      },
      {
        "id": "6",
        "imageUrl": "http://pic.lsybyb.com/yun/JLB/8.png",
        "content": ""
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.wxml

<view class="main-container">
  <view class="brand-content">
    <view class="banner">
      <image class="activity-image" src="http://images.yznt.com/junlebao1.png" mode="widthFix"></image>
    </view>
    <view class="banner">
      <image class="activity-image" src="http://images.yznt.com/junlebao2.png" mode="widthFix"></image>
    </view>
    <scroll-view scroll-x class="scroll-view-brand" wx:for="{{items}}" wx:key="item" wx:if="{{index%2==0}}">
      <block>
        <view class="brand-container">
          <navigator url="/pages/goods_details/index?id={{items[index].id}}">
            <view class="brand">
              <image class="logo" src="{{items[index].imageUrl}}" mode="aspectFit" />
            </view>
          </navigator>
        </view>
        <view class="brand-container">
          <navigator url="/pages/goods_details/index?id={{items[index+1].id}}">
            <view class="brand">
              <image class="logo" src="{{items[index+1].imageUrl}}" mode="aspectFit" />
            </view>
          </navigator>
        </view>
      </block>
    </scroll-view>
    <view class="banner">
      <image class="activity-image" src="http://images.yznt.com/junlebao9.png" mode="widthFix"></image>
    </view>
    <view class="banner">
      <image class="activity-image" src="http://images.yznt.com/junlebao10.png" mode="widthFix"></image>
    </view>
    <view class="banner">
      <image class="activity-image" src="http://images.yznt.com/junlebao11.png" mode="widthFix"></image>
    </view>
  </view>
</view>
 

index.wxss

.main-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  background-color: #e6591b;
}
.top-banner {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.banner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.banner .activity-image {
  width: 100%;
}
.scroll-view-brand {
  white-space: nowrap;
}
.brand-container {
  display: inline-block;
  width: 50%;
}
.brand {
  display: inline-block;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  font-weight: bold;
  position: relative;
}
.brand .logo {
  width: 100%;
  height: 240rpx;
}

.brand-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



 

相关项目查看更多