小程序商城列表案列

分享写小程序的点点案例，有时候工作会遇到不同的需求，总需要我们去处理，对于现在商城类的网站太多了，所以小程序也越来越多，现在公司的就是一个类似商城网站的项目，这是我写的以商城列表也，如图:

上面导航是可以滑动的，点击相对应的栏目，就会加载出其下面的内容，代码如下：

wxml:

<!-- 商城列表 -->
<view class="ldk-layout">
	<view class="p20">
		<!-- 栏目导航 -->
		<view class="ldk-column">
			<scroll-view class="clearfix overflowX" scroll-x>
				<view class="detail {{columnIndex==item.id ? 'active' : '' }} " hover-class="none" wx:for="{{column}}" wx:key="index" data-id="{{item.id}}" bindtap='columnTap'>
					<image src="{{columnIndex==item.id ? item.imgH:item.images}}"></image>
					<text class="font24 show text-ellipsis">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 列表内容 -->
		<view class="columnC {{listIndex==item.id ? 'show' : 'hide'}}" wx:for="{{columnList}}" wx:key="index" data-id="{{item.id}}">
			<view class="columnList clearfix relative" wx:for="{{item.list}}" data-id="{{item.id}}" data-value="{{item.name}}" wx:key="index" bindtap="detailTap" >
				<view class="img fl">
					<image src="{{item.images}}"></image>
				</view>
				<view class="goodsContainer">
					<view class="t font32 strong">{{item.name}}</view>
					<view class="detailT font24 text-two text-detail mt10">{{item.detail}}</view>
					<view class="detailT font24 text-detail mt10">好评 : {{item.comment}}</view>
					<view class="price mt10">
						<text class="font30 color strong"><text class="font22">￥</text>{{item.price}}<text class="font22">/台</text></text>
						<text class="font22 text-detail ml20">已售:{{item.sales}}</text>
					</view>
				</view>
			</view> 
		</view>
	</view>
</view>

js  data中模拟的数据

 data: {
		columnIndex:'1',
		listIndex:'1',
		column:[
			{
				id:'1',
				images:"/pages/images/ldk01.png",
				imgH:"/pages/images/ldkHover01.png",
				name:'疏通管道',
			},{
				id:'2',
				images:"/pages/images/ldk02.png",
				imgH:"/pages/images/ldkHover02.png",
				name:'家电清洗',
			},{
				id:'3',
				images:"/pages/images/ldk03.png",
				imgH:"/pages/images/ldkHover03.png",
				name:'家政维修',
			},{
				id:'4',
				images:"/pages/images/ldk04.png",
				imgH:"/pages/images/ldkHover04.png",
				name:'家庭保洁',
			},{
				id:'5',
				images:"/pages/images/safe.png",
				imgH:"/pages/images/safeIcon.png",
				name:'上门开锁',
			},{
				id:'6',
				images:"/pages/images/ldk02.png",
				imgH:"/pages/images/ldkHover02.png",
				name:'家电清洗',
			},{
				id:'7',
				images:"/pages/images/ldk03.png",
				imgH:"/pages/images/ldkHover03.png",
				name:'家政维修',
			},{
				id:'8',
				images:"/pages/images/ldk04.png",
				imgH:"/pages/images/ldkHover04.png",
				name:'家庭保洁',
			},{
				id:'9',
				images:"/pages/images/safe.png",
				imgH:"/pages/images/safeIcon.png",
				name:'上门开锁',
			}
			
		],
		columnList:[
			{
				id:'1',
				list:[
					{	id:'1',
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic19.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					},{
						id:'2',
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic34.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					},{
						id:'3',
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic36.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					}
				]
			},{
				id:'2',
				list:[
					{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic18.jpg",
						detail:"详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					},{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic08.jpg",
						detail:"详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					},{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic36.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					}
				]
			},{
				id:'3',
				list:[
					{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic16.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					},{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic26.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					},{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic12.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					}
				]
			},{
				id:'4',
				list:[
					{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic30.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					},{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic35.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					},{
						name:"油烟机清洗",
						images:"../../../pages/images/index/pic32.jpg",
						detail:"详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情描述详情",
						comment:"99%",
						price:"100",
						sales:"122",
						url:""
					}
				]
			}
		]
    },

columnTap:function(e){
		var that = this;
		// console.log(e);
		that.setData({
			columnIndex: e.currentTarget.dataset.id,
			listIndex: e.currentTarget.dataset.id
		})
	},

下面这个是js 判断的点击谁 就加载他请求的数据

wxss:  css也写上吧

.ldk-column{padding: 25rpx 0;}
.overflowX{white-space: nowrap;}
.overflowX .detail{display:inline-block;}
.ldk-column .detail{margin-right: 20rpx;width: 125rpx;height: 125rpx; text-align: center;border: 1rpx solid #ddd;border-radius: 10rpx;}
.ldk-column .detail image{ width: 42rpx; height: 42rpx;border-radius: 10rpx;margin-top: 24rpx;}
.overflowX .detail:last-of-type{margin-right: 0rpx;}
.active {border: 1rpx solid #d81e06 !important;}
.active text{color: #d81e06 !important;}

.columnList{padding: 0 0 20rpx 0;border-bottom: 1rpx solid #eee;margin-top: 20rpx;}
.columnList .img{width: 200rpx;height: 200rpx;}
.columnList .img image{width: 100%;height: 100%;border-radius: 10rpx;}
.goodsContainer{position: absolute;left: 220rpx;top: 0;height: 200rpx;}
.goodsContainer .detailT{line-height: 32rpx;}
.goodsContainer .price{position: absolute;left: 0;bottom: 0;}
.columnList:last-of-type{border-bottom: none;}

希望可以帮到其他朋友，也希望自己以后忘记了，可以自己来参考参考