2.菜谱小程序首页
目录
之前用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
<view class='container1'>
<view class="inputView" >
<input placeholder="爆浆芝士奶酪海绵蛋糕" auto-focus='true' class='input'/>
</view>
<view class="imageView">
<image src='/images/search.png' class='image'></image>
</view>
</view>.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也丝毫没有作用。
下面是官方文档的代码片段：
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>为什么会有这块空白啊？？突然想起以前学html&css的时候老师说有些组件会自带一点padding或者margin值，于是我就给swiper的每一层（swaiper、block、swiper-item）都设置了margin=0，padding=0，但是并没有用。
然后我就想是不是我的图片有问题啊，于是我换成了官方给的图片链接，惊奇的发现，官方的图片，就可以完全显示！！三张图片中，swiper正好和最高的图那张片完全重合，其余两张图片稍矮，会露出一点点灰色的背景。
然后我还是不懂为什么会这样，我试着改变<image src="{{item}}" class="slide-image" width="355" height="150"/>中的高度，发现依然没有用，奇怪的是图片大小一点也没变。去官方文档中仔细看image的属性，发现根本没有width和height这两个属性，在html中是可以这样设置图片的大小的，但是在wxml中，改变图片的大小
要么单独给图片单独添加class，在wxss中设置图片大小
<image src="{{item}}" class="slide-image" mode='aspectFit'/>
.slide-image{
width: 100%;
height: 172px;
}要么就用style
<image src="{{item}}"mode='aspectFit' style='width:100%;height: 172px;'/>解决了这个问题，swiper还是很简单很美好的！
.wxml
<view class='swiperView'>
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class='swiperclass'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" mode='aspectFit'/>
</swiper-item>
</block>
</swiper>
</view>.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
<view class='textview'>
<text class='text'>今 日 推 荐</text>
</view>.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
- 用循环可以大大减少代码量哦~~
难点是在布局上，可以参考这篇博客。图片大小的设置也要小心哦，直接<image width=100 height=100/>是没有用滴！
.wxml
<view class='content'>
<view class='content-item' wx:for="{{content_item}}">
<image src="{{item.image}}" class='image-intro'/>
<text class='content-item-text'>{{item.name}}</text>
</view>
</view>.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组件的使用，需要图片数据或完整代码可以留言邮箱哈~~
谢谢浏览，如有错误烦请指正， (≧∀≦)ゞ
***********2020.10.16更新***********
没想到会有这么多小伙伴需要源码，感谢大家的认可~为了让大家更及时的拿到资源，我把源码上传到了CSDN资源，不需要C币，也不需要关注就可以下载哈！
https://download.csdn.net/download/qq_42183184/12923343
4434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
