微信小程序综合案例实践2

2.菜谱小程序首页

目录

1.搜索框&搜索按钮

2.滑动图片框

3.小标题

4.菜品图片&菜品名称列表

5.导航条

6.效果图

---

之前用AndroidStudio写过一个菜谱app，这次打算用微信小程序模拟一下app的首页。因为对微信小程序的不熟悉，完成过程中还是掉到了各种小坑。

首页的主要组成部分：

• 输入框----input
• 搜索按钮----image
• 一个滑动的图片框----swiper
• 菜谱图片&菜谱名称列表----image&text
• 导航条----tabBar

1.搜索框&搜索按钮

• 输入框用Input实现，但是给input组件加边框用boder是没有用的，需要在外面加一个view，给view设置border
• 搜索框自带输入提示词是给input组件设置placeholder="XXX"
• 微信小程序的按钮不能自定义图片，所以给image设置点击事件来实现搜索按钮
• 搜索框和搜索按钮是在同一个view里面的，为了让二者并排，给此view设置布局，display: flex;
• 图片的大小需要给image标签设置样式，给其所在的容器设置大小没用，图片大小不会变的。

.wxml

.wxss

.container1{
  width: 100%;
  margin-top: 0;
  padding: 0;
  height: 44px;
  /* background-color: #FFCB57; */
  display: flex;
}

.inputView{
    border: px solid0 #000;
    border-radius: 6px;
    margin-left: 15px;
    margin-top: 3px;
    margin-bottom: 3px;
    background-color: #F5F7F9;
    width: 76%;
    /* background-color: #EDD3ED;*/
} 

.input{
    margin-left: 30px;
    padding-left: 10px;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
}

.imageView{
    margin-left: 4px;
    width: 20%;
    /* background-color: #C8EFD4; */
}

.image{
  width: 44px;
  height: 44px;
}

---

2.滑动图片框

用swiper组件完成，官方文档有现成代码超方便~ 但是官方文档也有一个小小Bug啊，这个小坑我看了半天才弄懂啊啊啊

下面是遇到的那个神烦的问题吧。

（这是完整的图片）

swiper的高度是可以正好放下图片的，但是上面偏偏就是有一块空白（我为swiper设置了灰色背景方便看）！！然后明明可以正常显示的图片被活生生的截了一截，改变图片的mode也丝毫没有作用。

下面是官方文档的代码片段：

为什么会有这块空白啊？？突然想起以前学html&css的时候老师说有些组件会自带一点padding或者margin值，于是我就给swiper的每一层（swaiper、block、swiper-item）都设置了margin=0，padding=0，但是并没有用。

然后我就想是不是我的图片有问题啊，于是我换成了官方给的图片链接，惊奇的发现，官方的图片，就可以完全显示！！三张图片中，swiper正好和最高的图那张片完全重合，其余两张图片稍矮，会露出一点点灰色的背景。

然后我还是不懂为什么会这样，我试着改变中的高度，发现依然没有用，奇怪的是图片大小一点也没变。去官方文档中仔细看image的属性，发现根本没有width和height这两个属性，在html中是可以这样设置图片的大小的，但是在wxml中，改变图片的大小

要么单独给图片单独添加class，在wxss中设置图片大小

.slide-image{
  width: 100%;
  height: 172px;
}

要么就用style

解决了这个问题，swiper还是很简单很美好的！

.wxml

.js

Page({
  data: {
    imgUrls: [
      '/images/banner1.png',
      '/images/banner2.png',
      '/images/banner3.png',
      '/images/banner4.png'   
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000
  }
})

.wxss

.swiperView{
  height: 172px;
  width: 100%;
}
.swiperclass{
  height: 172px;
  width: 100%;
}
.slide-image{
  width: 100%;
  height: 172px;
}

---

3.小标题

• 小标题当然就用text标记完成咯，很简单！
• 让小标题居中显示，涉及一些布局的小知识。如果这一块不清楚可以看一下这一篇博客！

.wxml

  今 日 推 荐

.wxss

.textview{
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7F7F7F;
}

.text{
  /* background-color: #C8EFD4; */
  font-size: 20px;
}

---

4.菜品图片&菜品名称列表

首先确定好列表的框架

• 最外层一个大大的view（content）
• 然后里面每一道菜用一个view（content-item）来装
• 每一个content-item里面装一个image和一个text
• 用循环可以大大减少代码量哦~~

难点是在布局上，可以参考这篇博客。图片大小的设置也要小心哦，直接是没有用滴！

.wxml

  
    
    {{item.name}}
  

.wxss

.content{
  margin-top: 2px;
  height: 480px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.content-item{
  height: 125px;
  width: 45%;
  margin: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-intro{
  width: 100%;
  height: 100px;
}

.content-item-text{
  color: #7F7F7F;
  font-size: 16px;
}

.js

Page({
  data: {
    content_item:[
      {
        image:"/images/introduce1.png",
        name:"麻辣小龙虾"
      },
      {
        image: "/images/introduce2.png",
        name: "五香粉蒸排骨"
      },
      {
        image: "/images/introduce3.png",
        name: "芝麻糖奶香菊花饼"
      },
      {
        image: "/images/introduce4.png",
        name: "宫保虾仁杂素"
      },
      {
        image: "/images/introduce5.png",
        name: "传统意大利披萨"
      },
      {
        image: "/images/introduce6.png",
        name: "香草冰淇淋泡芙"
      },
      {
        image: "/images/introduce7.png",
        name: "芒果木糠杯"
      },
      {
        image: "/images/introduce8.jpg",
        name: "草莓慕斯切块"
      }
    ]
 }
})

---

5.导航条

导航条用tabBar完成，在app.json中完成配置即可。官方是有代码的，也可以参考这篇博客的app配置部分。

app.json

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "selectedColor":"#FDBB1C",
        "iconPath": "images/home_gray.png",
        "selectedIconPath": "images/home_orange.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "目录",
        "selectedColor": "#FC8F1D",
        "iconPath": "images/category_gray.png",
        "selectedIconPath": "images/category_orange.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/more_gray.png",
        "selectedIconPath": "images/more_orange.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "selectedColor": "#FC8F1D",
        "iconPath": "images/cart_gray.png",
        "selectedIconPath": "images/cart_orange.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "selectedColor": "#FC8F1D",
        "iconPath": "images/profile_gray.png",
        "selectedIconPath": "images/profile_orange.png"
      }
    ]
  }
}

我设置了selectedColor属性，但是当我点击按钮时，文字的颜色并没有变。目前还不知道原因，如果你知道麻烦告诉我哦~~

---

6.效果图

Android模拟器

微信小程序

感觉山寨得还是很成功哈哈哈！

这个小案例主要练习了布局和一些UI组件的使用，需要图片数据或完整代码可以留言邮箱哈~~

谢谢浏览，如有错误烦请指正， (≧∀≦)ゞ