微信小程序开发之小米商城

最新推荐文章于 2024-08-17 18:47:23 发布

不许动一二三

最新推荐文章于 2024-08-17 18:47:23 发布

阅读量4.9k

点赞数 7

本文链接：https://blog.csdn.net/yuanqi3131/article/details/82931729

版权

小程序开发之小米商城Lite

刚接触小程序不久，感觉相对来说比较简单，就自己花了五六天做了一个项目，因为本身也是米粉，就看中了小米的微信小程序(可怜国庆撸了几天的代码，哈哈)，话不多说，先上效果图吧。
算了算了。本来还打算上gif图，但是太难搞了，说明一下吧。要看效果的等下我贴出项目github地址来，自己去看吧

1. 项目模块

整个项目大致分为首页，分类，发现，购物车，我的五个模块，其实就是底部导航条的五块，

1）首页

首页的重点也就是一个轮播图，然后一个全局的底部导航条，其实微信小程序都给我们提供的组件。像轮播图组件 swiper-item,然后底部导航条在app.json中设置tabBar都可以实现，前面我还在纠结自己如何实现一个底部导航条，然后后面各种纠结，其实就简简单单的配置就行，所以说文档很重要。贴一张首页图吧
在这里插入图片描述

2）分类

分类这一个模块，其实是挺让我难下手的，先给张图你就明白了
在这里插入图片描述
看上面图就知道，第一个是数据的问题，对于一个学前端的人来讲，数据是非常重要的，因为前端人员就是要对后台提供的数据，以各种形式，各种界面来显示，让用户更好的去使用，去体验，所以摆在我前面的第一个问题就是我没有数据，然后第二个问题，布局问题，我侧导航条可以自己移动，右边也可以自己移动，互不干扰，然后我琢磨了一段时间，将左边侧导航栏设置为positoin:absolute；脱离文档流，再加上overflow:scroll；就可以了，然后::-webkit-scrollbar{display:none;}把滚动条样式去除，就都实现了，做出来之后满足感爆棚，然后第一个问题我新建了一个js文件，在里面造json数据，这个json数据挺复杂了，太多括号，就不贴出来了，然后再使用小程序提供的模板template组件循坏放入，这个时候，难点又出现了，因为小程序对于循坏渲染的例子太单一而且简单，就只有对单一josn的渲染，什么是单一的json，就比如：

[
	{
	   name:'张三'，
	   age:24
	},
	{
	  name:’李四'，
	   age:23
	}
]

这种就是单一的json，就一层

[
	{
	   name:'张三'，
	   age:24,
	   interest:
	   [
			   { sports:'足球'},
			   { sports:'篮球'}
	  ]
	},
	{
	  name:’李四'，
	   age:23，
	    interest:
	   [
			   { sports:'足球'},
			   { sports:'篮球'}
	  ]
	}
]

差不多就这个意思，多层的在文档中是没有说明的。

<view style='padding-top:10rpx;' wx:for='{{list}}' wx:key='{{index}}' id='nav-{{index}}'  wx:for-item="itemName">
	<view  wx:for='{{itemName.content}}'  wx:key='{{index}}'>
		<template is='categoryItem'  data='{{...item}}'></template>
	</view>
</view>

纠结了好久，传入了模版，我这里循坏了两次，去获得里面的值，详细看json数据结果，反正意思就是不断去调试，循坏一次，只能获得第一层的数据，循环了两次，获得第二层的，加入你说我只循环一次，然后通过点（.）去吧数据点出来，这是不可能的，我试过了。
然后布局都出来了，又碰到了怎么锚点滑动，然后搞了好久，发现小程序有这个东西，通过scroll-view组件里面的scroll-into-view的属性，然后通过设置id，绑定

<scroll-view scroll-y="true" style='height:100%' scroll-with-animation="true" scroll-into-view='{{toview}}' >
	<view style='padding-top:10rpx;' wx:for='{{list}}' wx:key='{{index}}' id='nav-{{index}}'  wx:for-item="itemName">
		<view  wx:for='{{itemName.content}}'  wx:key='{{index}}'>
			<template is='categoryItem'  data='{{...item}}'></template>
		</view>
	</view>
</scroll-view >

其中scroll-y="true"允许竖向滚动 height要设置，你可以试试不加这个 scroll-with-animation=“true” 滑动动画，这里面同通过js动态绑定id，使id值给上面的toview相同时，就会锚定定位，搞了好久，心累，不过效果出来了还是很爽的，哈哈哈。