01 小程序产品列表排版

一 、图

   

 

二、  wxml 

<view class='main1'>
  <view style='margin-left: {{borderwidth}}px' wx:for="{{array}}">
    <view class='foritm' style='width:{{width}}px;border-width:{{borderwidth}}px;'>
      <image src='{{item.img}}' style='width: {{width}}px; height: {{width}}px;'></image>
      <view>
        <view class='itmTitle'>
          <view class='itmTitle1'>{{item.txt}}</view>
        </view>
        <view class='itmAmt'>
          <view class='itmAmt1'>{{item.up1}}元</view>
          <view class='itmAmt2'>{{item.up2}}元</view>
        </view>
      </view>
    </view>
  </view>
</view>

三、 js

// pages/ahome/ahome.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    width: 160,
    height: 160,
    borderwidth: 10,
    array: [{
        txt: '桃子:新鲜的桃子，好吃的桃子，快来购买',
        img: '../../images/prd/桃子.png',
        up1: '230',
        up2: '130',
        isup: '1'
      },
      {
        txt: '苹果:新鲜的苹果，好吃的苹果，快来购买',
        img: '../../images/prd/苹果128.png',
        up1: '230',
        up2: '130',
        isup: '1'
      },
      {
        txt: '西瓜:新鲜的西瓜，好吃的西瓜，快来购买',
        img: '../../images/prd/西瓜.png',
        up1: '230',
        up2: '130',
        isup: '1'
      },
      {
        txt: '青蛙:新鲜的青蛙，好吃的青蛙，快来购买',
        img: '../../images/prd/青蛙.png',
        up1: '230',
        up2: '130',
        isup: '1'
      },
      {
        txt: '鸭梨:新鲜的鸭梨，好吃的鸭梨，快来购买',
        img: '../../images/prd/鸭梨128.png',
        up1: '230',
        up2: '130',
        isup: '1'
      }
    ]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var self = this;
    /*-------------------------------*/
    //修改导航栏颜色
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#F86125',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
    /*-------------------------------*/
    //设置页面标题
    wx.setNavigationBarTitle({
      title: '首页'
    });
    /*-------------------------------*/
    wx.getSystemInfo({
      success(res) {
        var widths = res.windowWidth;
        var bfb = widths * 1.0 / 187;
        if (bfb <= 1) {
          bfb = 1;
        }
        if (widths < 700) {
          bfb = 2;
        }
        //console.log('百分比 : ' + bfb);
        //-------------------------------
        var num = Math.floor(bfb) * 2 + 2; //个数 
        var numtol = Math.floor(num * 4); //总框
        var panlwidth = widths - numtol;
        console.log('dd : ' + panlwidth);
        //-------------------------------
        self.setData({
          width: Math.floor(panlwidth * 1.0 / Math.floor(bfb)),
          height: Math.floor(panlwidth * 1.0 / Math.floor(bfb)*1.5),
          borderwidth: 4
        })
      }
    });
  },

四、wxss 

/* pages/ahome/ahome.wxss */

page {
  width: 100%;
  background-color: rgb(240, 239, 239);
}

/*------------------------*/

.main1 {
  width: 100%;
}

.foritm {
  float: left;
  border-radius: 15px;
  border-style: solid;
  border-color: rgb(240, 239, 239);
  background-color: rgb(255, 255, 255);
  font-size: 16px;
}

/*-----------------------------------------------------*/
.itmTitle {
  width: 100%;
  margin-bottom: 5px;
  border-style: solid;
  border: solid rgb(203, 179, 226) 1px;
  border-left-width: 0px;
  border-right-width: 0px;  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.itmAmt {
  width: 100%;
  height: 60rpx;
  float: left;
  border: solid rgb(203, 179, 226) 0px;
  font-size: 12px;
}

.itmSale {
  width: 50%;
  height: 60rpx;
  float: right;
  border: solid rgb(203, 179, 226) 0px;
}

/*------------------------*/

.itmTitle1 {
  height: 100%;
  width: 90%;
}

.itmAmt1 {
  width: 35px;
  height: 100%;
  line-height: 100%;
  float: left;
  text-decoration: line-through;
  font-style: oblique;
  color: coral;
  padding-left: 6px;
  border: solid rgb(203, 179, 226) 1px;  
  display: flex;  justify-content: center;  align-items: center;
}

.itmAmt2 {
  width: 35px;
  height: 100%;
  line-height: 100%;
  float: left;
  padding-left: 6px;
  border: solid rgb(203, 179, 226) 1px;
  display: flex;  justify-content: center;  align-items: center;
}