【uniapp开发从0开始做一个小程序-04(搜索框+轮播图)】

【uniapp开发从0开始做一个小程序-04(搜索框+轮播图)】

目录

• 第一项：做一个搜索框
• 第二项：做一个顶部菜单栏
• 第三项：做一个轮播图

第一项：做一个搜索框

1 -1：首先修改pages.json文件里面的index页面显示内容，将页面顶部标题改为“首页”

1-2：删除原来的testButton按钮，运行一下之前的colorui项目，在组件->操作条bar中选择自己喜欢的搜索框。然后点击调试栏的小鼠标，在点击自己选中区域

1-3：就会出现自己想要的搜索框对应代码，选择pages/componets/bar ，找到相应的代码，就可以进行引用

1-4：在项目的index.vue文件里将相应代码复制粘贴过来，修改一下我们想要的值，比如placeholder的值（我改成了“请输入搜索内容”），但是我们要注意我们有两个函数没有写，把这连个函数删掉就行了@focus=“InputFocus” @blur=“InputBlur”，其他的默认不变

1-5：运行结果：搜索框出来了，但是没有任何效果，因为没有添加响应函数。可以根据个人偏好修改一些属性，比如颜色，字体大小，内容之类的

1-6：我这里把搜索框的背景颜色变成了渐变绿色，把按钮变成了黄色

1-7：添加数据绑定，在input里面添加v-mode属性，在return里面定义一个默认的空值searchResult，通过这个值，我们可以对搜索框内容进行操作，这个是后端的工作，就不细讲了，我们先完成基本框架搭建

第二项：做一个顶部菜单栏

2-1：与搜索框类似，先找一个我们相中的菜单栏，找到相应代码（略），复制粘贴过来，再对其进行修改。

2-2：运行结果

2-3：修改为静态循环显示菜单栏：首先需要在return里面先写一个菜单列表tabList

2-4：将之前写的菜单栏内容删除，在删除的view里面添加循环v-for，item表示当前循环到的对象，index表示循环到对象的索引值。再添加一个key（索引值），设置当前对象

2-5：想要显示当前页面效果，对其添加点击函数@click，然后在methods方法里，新建一个点击切换函数

2-6：完善函数，实现点击切换效果：在return里定义一个thisTab记录当前菜单序号，将tabChange函数里的当前序号切换为循环过程中的序号

2-7：在显示框的view里添加动态函数:class，用以动态修改显示的内容样式
thisTab == index?‘text-yellow cur’:’’ 就是简单的 a?b:c 判断的运用

2-8：运行结果：那么顶部菜单栏就完成了

第三项：做一个轮播图

3-1：运用uniapp自带的轮播图组件swiper和swiper-item先写一个基本的轮播图（图片是我在京东上找的），我们会发现虽然有轮播功能，但是长相实在是丑陋！

3-2：修改轮播图一些样式设置，对image定义一个类叫swiperSet，然后在index.css里面进行详细的定义

3-3：运行图片：具有自动切换功能

总结：好了，今日份的作业完成，今天事情很多，熬到一点半还是坚持完成了每日打卡的任务。总的来说还算不错，明天的内容是首页分类小图标和推荐商品列表两个板块。不积跬步，无以至千里；不积小流，无以成江海！每天进步一点点，妈妈夸我小天才！
^ o ^￥