码迷,mamicode.com
首页 > 微信 > 详细

小程序-产品列表 view-for循环

时间:2019-02-25 10:37:48      阅读:707      评论:0      收藏:0      [点我收藏+]

标签:mamicode   man   lin   display   size   ext   padding   inf   mil   

 

技术图片

 

一、 wxml

<view class=‘far‘>
  <view>
    <view class=‘prd‘ wx:for="{{array}}">
      <image src=‘{{item.img}}‘ class=‘prditm imgto‘></image>
      <view class=‘prditm prdtxt‘>{{item.txt}}</view>
      <view class=‘prditm prdup prdup1‘>{{item.up1}}元</view>
      <view class=‘prditm prdup‘>{{item.up2}}元</view>
      <view class=‘prditm prdgm‘>立即购买</view>
      <image src=‘../../images/prd/购物车.png‘ class=‘prditm prdgwc‘></image>
    </view>
  </view>
</view>
 

 

二、 JS

  data: {
    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‘ }, 
    ]

  },

三、 CSS

.far{ 
  width: 100%;
  border-width: 0rpx; 
  display:flex; 
  justify-content:center;
  align-items:center;
}
.prd{  
  margin: 0rem;
  padding: 0rem; 
  margin-top: 6rpx;
  border:solid darkgray 1rpx; 
  width: 366rpx;
  float: left; 
  margin-left: 3rpx;
}
.prditm{
 float: left;
}
.prdtxt{
  font-size: 38rpx;
  font-family: ‘Times New Roman‘, Times, serif;
  color:  darkgray;
  width: 100%;
   border-bottom:solid rgb(203, 179, 226) 1rpx; 
   border-top:solid rgb(203, 179, 226) 1rpx; 
}
.prdgwc{
  width: 40rpx;height: 40rpx;
  float: right;
  margin-top: 15rpx;
  margin-right: 10rpx;
}
.prdgm{
  margin-left: 10rpx;
  margin-top: 10rpx;
  float: right;
  width: 130rpx;height: 60rpx; font-size: 30rpx;   
}
.imgto
{
  width: 100%;
  height: 355rpx;
}
.prdup{  
  margin-top: 10rpx;
  width: 70rpx;
  font-size: 25rpx;
  color:  red;
}
.prdup1{
  margin-left: 10rpx;
  text-decoration:line-through;
  color:  coral;
}

 

小程序-产品列表 view-for循环

标签:mamicode   man   lin   display   size   ext   padding   inf   mil   

原文地址:https://www.cnblogs.com/lanyubaicl/p/10429464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!