小程序 | 微信小程序实现商品分类列表

这篇具有很好参考价值的文章主要介绍了小程序 | 微信小程序实现商品分类列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序 | 微信小程序实现商品分类列表

一、效果展示

小程序 | 微信小程序实现商品分类列表文章来源地址https://www.toymoban.com/news/detail-507637.html


二、代码实现
<!-- wxml -->
<view class="container">
<!-- 商品列表 -->
	<view class="cate">
		<!-- 左侧导航 -->
		<scroll-view scroll-y class="nav-left">
			<view 
				wx:for="{{List}}"
				wx:key="this"
				class="nav-left-item {{currentIndex_L == index ? 'L-item-active' : ''}}" 
				bindtap="bindleLeftItemTap" 
				data-index="{{index}}" >
				<text class="nav-left-item-txt {{currentIndex_L == index ? 'L-i-txt-active' : ''}}">{{item.LeftName}}</text>
			</view>
		</scroll-view>
		<!-- 右侧导航 -->
		<scroll-view scroll-y scroll-top="{{scrollTop}}" class="nav-right">
			<view 
				wx:for="{{List[currentIndex_L].RightList}}"
				wx:key="this"
				class="nav-right-item"
				bindtap="bindleRightItemTap" 
				data-index="{{index}}">
				<text class="nav-right-item-txt {{currentIndex_R == index ? 'R-i-txt-active' : ''}}">{{item.RightName}}</text>
				<view class="{{currentIndex_R == index ? 'image-select' : ''}}">
					<image wx:if="{{currentIndex_R == index}}" class="item-select" src="../icon/Hook_icon.png"/>
 				</view>
			</view>
		</scroll-view>
	</view>
	<view class="pd32 btn-find">
		<view bindtap="toDetail">
			<view class="btn-big">查看详情</view>
		</view>
	</view>
</view>
// js
// 假数据
let List = [
	{
		"LeftId": 1,
		"LeftName": "分类1",
		"RightList": [
		{
			"RightId": 11,
			"RightName": "商品11"
		},
		]
	},
	{
		"LeftId": 2,
		"LeftName": "分类2",
		"RightList": [
		{
			"RightId": 21,
			"RightName": "商品21"
		},
		]
	},
]

Page({
	/**	
	 * 页面的初始数据
	 */
	data: {
		List : List,
		selectLeftId : null,
		selectRightId : null,
		currentIndex_L : null,
		currentIndex_R : null,
		scrollTop : 0
	},
	
	/**
	 * 左导航点击事件
	 */
	bindleLeftItemTap(e) {
		const {index} = e.currentTarget.dataset;
		this.setData({
			currentIndex_L:index,
			currentIndex_R : null,
			selectLeftId : this.data.List[index].LeftId,
			selectRightId : null,
			scrollTop : 0,
		}) 
	},

	/**
	 * 右导航点击事件
	 */
	bindleRightItemTap(e) {
		const {index} = e.currentTarget.dataset;
		let index_L = this.data.currentIndex_L;
		this.setData({
			currentIndex_R : index,
			selectRightId : this.data.List[index_L].RightList[index].RightId,
		}) 
	},

	/**
	 * 底部查看详情按钮点击事件
	 */
	toDetail(e) {
		var selectLeftId = this.data.selectLeftId;
		var selectRightId = this.data.selectRightId;

		if(selectLeftId === null){
			wx.showToast({
				title: '请选择一种分类或商品!',
				icon: 'none',
				duration: 1500,
				mask: true
			});
			return;
		}
		if(selectRightId != null) {
			wx.navigateTo({
				url: '/pages/Detail/Detail' + '?' +
				'selectLeftId=' + selectLeftId + 
				'&selectRightId=' + selectRightId,
				});
			}
			else {
				wx.navigateTo({
				url: '/pages/Detail/Detail' + '?' +
				'&selectLeftId=' + selectLeftId,
			});
		}	
	},
})
/* wxss */
page{
  background-color: #fff; 
}

.container {  
  display: flex;
  flex-direction: column;
  width: 100%;  
  height: 100%;  
  background-color: #fff;  
  color: #939393;  
} 

.cate {
  display: flex;
  flex-direction: row;
  height: 85vh;
}

.nav-left{
  display: inline-block;  
  width: 45%;  
  height: 85vh;  
  background: rgba(255, 255, 255, 1);  
  text-align: left;  
} 

.nav-left-item{
  display: flex;
  align-items: center;
  background: rgba(240, 242, 246, 1);
  height: 100rpx;   
  border-bottom: 1rpx solid #fdfcfc; 
}  

.L-item-active{  
  border-left: 6rpx solid rgba(255,94,9,1);
  background: rgb(255, 255, 255);
} 

.nav-left-item-txt {
  margin-left: 40rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 70rpx;   
  padding: 16rpx;     
  font-size: 32rpx; 
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.L-i-txt-active {
  color: rgba(255, 94, 9, 1);
}

.nav-right {  
  display: inline-block;  
  width: 55%;  
  height: 85vh;  
  background: rgba(255, 255, 255, 1);  
  text-align: left; 
} 

.nav-right-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  height: 100rpx;   
  border-bottom: 1rpx solid rgba(240,242,246,1);
}

.nav-right-item-txt {
  width: 300rpx;
  margin-left: 40rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 70rpx;   
  padding: 16rpx;     
  font-size: 32rpx; 
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.R-i-txt-active {
  color: rgba(255, 94, 9, 1);
}

.image-select {
  width: 60rpx;
  height: 50rpx;
  margin-left: 16rpx;
  margin-right: 32rpx;
}

.item-select {
  display: flex;
}

.btn-find {
  height: 15vh;
}

.btn-big {
  background: linear-gradient(270deg, #FF5000 0%, #FF9000 100%);
  box-shadow: 0px 6px 10px 0px rgba(255, 80, 0, 0.3);
  border-radius: 26px;
  font-size: 26rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFF!important;
    width: 100%;
  text-align: center;
  height: 88rpx;
  font-size: 36rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 44rpx auto;
}

到了这里,关于小程序 | 微信小程序实现商品分类列表的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 列表多选 下拉分页 滑动切换分类

    1、卡片列表 2、分页(下拉页面加载分页数据) 3、分类(页面间互不干扰,数据也不干扰) 4、左右滑动可切换分类 5、列表搜索 6、单选模式(默认单选模式,即点击卡片,回写所选数据) 7、 多选 模式(实现微信聊天多选效果) 长按 列表或 点击多选 ,进入多选模式;

    2024年02月03日
    浏览(41)
  • 微信小程序商品详情页(页面的实现)

    通过搜索页面传入的id,来进行操作(没有接口,都是假数据),页面如下 首先先把页面搭建起来,并进行渲染顶部导航栏已经做过现在就不发了,直接复制就好 页面信息的wxml 尾部导航栏wxml  js wxss 现在简单的小页面完成了

    2024年02月04日
    浏览(55)
  • 微信小程序实现商品加入购物车案例

    思考: 购物车中的数据保存在哪里?用哪种数据结构进行保存? 小程序中可能有多个页面需要对购物车中的数据进行操作,因此我们想到把数据存到全局中。可以使用 wx.setStorageSync() 储存,用 wx.getStorageSync() 进行获取,以数组格式方便对数据进行操作。 一、商品加入购物车

    2024年02月10日
    浏览(49)
  • 微信小程序毕业设计作品成品(43)微信小程序水商品商城订水送水系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(36)
  • 微信小程序 如何实现列表

    微信小程序中实现列表可以通过使用「scroll-view」组件或「list」组件来实现。 使用「scroll-view」组件:可以使用 wx:for 指令来循环渲染列表中的数据,并为每个元素设置相应的样式。 使用「list」组件:该组件已经内置了列表的常用功能,包括列表渲染、上拉加载、下拉刷新等

    2024年02月11日
    浏览(41)
  • 实现原生微信小程序虚拟列表

    小程序的setData每一次调用,都会重新和旧的虚拟dom进行diff对比,如果页面列表比较大的话,不断频繁加载setData,实际上是非常消耗性能的,所以也是为了解决这个考虑,我虽然每一次都在使用setData加载数据,但是setData加载完成的数据,我并不是直接渲染,而是通过wxml中微

    2024年02月11日
    浏览(48)
  • 基于Java+Vue+uniapp微信小程序商品展示系统设计和实现

    博主介绍 : ✌ 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到哟 2022-2024年

    2024年02月06日
    浏览(66)
  • 微信小程序实现tab切换和数据列表

    上篇文章介绍了微信小程序实现tab切换的一种方案(参考 https://blog.51cto.com/baorant24/6188157 ),感觉代码不是很精简,本文再用一个demo介绍微信小程序如何实现tab切换和数据列表。 微信小程序对应页面文件结构如下: 话不多说,直接上代码: (1)index.js文件,代码如下: (2)index.

    2024年02月05日
    浏览(47)
  • 【微信小程序】列表滚动触底更新实现

    微信小程序开发系列 在微信小程序开发中经常遇到分页列表需要滚动到底部之后进行请求数据更新,下面介绍如何进行触底更新分页展示。使用到页面上拉触底事件的处理函数 onReachBottom 。 监听用户上拉触底事件,可以在app.json的window选项中或页面配置中设置触发距离onRea

    2024年02月05日
    浏览(36)
  • 微信小程序毕业设计作品成品(76)微信小程序垃圾分类知识普及系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包