新手版微信小程序商场商品分类页面（本地版）

前言

我做的这个商品分类页面，一共是由两个页面完成的。一个是分类页面，另一个是商品详情页面。下面我放2张图片，可以看下是不是需要的类型。

 第一张图片是商品的分类页面，第二张图片是商品的详情页。第一次写小程序，所以比较做的粗糙，希望对你有帮助。

代码

商品分类页

商品分类页：wxml

<view class="shopping"><!----><!--大框架-->
  <view class="nav_left"><!--侧边栏盒子-->
    <block wx:for="{
  {leftitem}}" wx:key="id">
      <!--这里定义了一个变量index，并把这个变量赋值为index，这个是wx：for循环产生的下标，传到js，通过这个下标完成商品的显示-->
      <view class="nav_left_items {
  {count==index?'active-tag':''}}" bindtap="switchRightTab" data-index="{
  {index}}"><!--文字盒子-->
        {
  {item.name}}
      </view>
    </block>
  </view>
  <view class="nav_right"><!--右边主体部分-->
    <!--通过侧边栏的选择传到js中的index的值与js中data数据中的tag进行比较，完成商品的分类显示-->
    <view class="nav_right_goods" wx:for="{
  {rightitem}}" wx:key="id" wx:if="{
  {count==item.tag}}" ><!--商品详情的盒子-->
      <view bindtap="click_nav_right" data-index_two="{
  {index}}" class="nav">
        <image src="{
  {item.url}}" mode="widthFix" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;"></image><!--商品图片-->
        <view class="nav_right_textandprice"><!--文字和价格的盒子-->
          <text class="nav_right_text" style="color: black;">{
  {item.name}}</text><!--商品文字-->
          <view class="nav_right_price"><!--商品价格-->
            ￥{
  {item.price}}.00
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

商品分类页：wxss</