• 实验目的和要求

• 请编写下方商品列表页面，展示商品名称和价格；

二、实验步骤与结果（给出对应的代码或运行结果截图）

Index.WXML

<view class="shop" wx:for="{{10}}">

  <view class="shop_left">

    <image src="../../images/book.jpg" mode="" />

  </view>

  <view class="shop_right">

    <view>名称：微信小程序开发实战</view>

    <view>价格：￥50</view>

  </view>

</view>

Index.WXSS

.shop {

  width: 100%;

  height: 140rpx;

  border: 1px solid #ccc;

}

.shop_left {

  padding-left: 5rpx;

  display: inline-block;

}

.shop_right {

  padding-left: 200rpx;

  position: relative;

  display: inline-block;

  color: #ccc;

  bottom: 20rpx;

}

image {

  width: 100rpx;

  height: 100rpx;

  border: 2rpx solid #ffffff;

  margin-top: 20rpx;

}

.shopright view {

  font-size: 30rpx;

}

page {

  border: 1px solid #ccc;

  background-color: #000;

}