微信小程序商城 毕业设计（2）分类

配套的后台有jsp版本、php版本、asp版本

wxml代码

<view class="container">
	<!-- 左侧分类 -->
	<view class="aside"  style="height:{{winHeight}}px">
		<block wx:for="{{navList}}">
			<text class="type-nav {{curNav == item.id ? 'selected' : ''}}" 
            bindtap="selectNav"
            data-index="{{index}}" 
            data-id="{{item.id}}">{{item.name}}
      </text>
		</block>
	</view>

	<!-- 右侧产品 -->
	<view class="content">  
    <view class="cps">
      <block wx:for="{{dishesList[curIndex]}}">
          <view class="cp-item" >
            <navigator url='/pages/fenlei/yemian/01-xiangxi'>
              <image src='{{item.img}}' class="cp-image"/>
              <text>{{item.name}}</text>
              <text>￥：{{item.price}}</text>
            </navigator>
          </view> 
      </block>
    </view>
	</view>

</view>

wxss代码

.container {
  height: 100%;
  box-sizing: border-box;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: row;
}
/*左侧-分类*/
.aside{
	width:4rem;
	border-right: 1px solid #ddd;
	font-size: .85rem; height: 100%;
  display: flex;
  flex-direction: column;
}
.type-nav{
	position: relative;
	padding:.7rem .3rem;
	text-align: center;
	border-bottom: 1px solid #ddd;
	z-index: 10;
}
.type-nav.selected{
	margin-right: -1px;
	padding-left:-1px;
	color: #333;
	background-color: #fff;
}

/*右侧-1行3列图片*/
.content{
	background-color: #fff;
  flex: 1;
}
.cps {
  display: flex; 
  flex-wrap:  wrap; /*自动换行*/
}
.cp-item {
  width: 30%;
  display: flex;
  padding: 2px;
   
}
.cp-item navigator
{
  display: flex;
  flex-direction: column; 
}
.cp-image {
  width: 180rpx;
  height: 180rpx;  margin: 1px;  padding: 1px;
}
.cp-item text {
  padding-top: 10rpx;
  font-size: 25rpx; 
  text-align:  center;
  width: 100%;
}