文章目录
1.1效果图
1.2搜索框
1.2.1新建组件
搜索框因为很多页面都用到我们可以直接封装,在components目录下新建SearchInput文件夹,并通过小程序开发工具,新建组件SearchInput。
1.2.2编写组件
在SearchInput.wxml中编写页面,此处点击跳转搜索页面,代码如下:
<!--components/SearchInput/SearchInput.wxml-->
<view class="search_input">
<navigator url="/pages/search/index" open-type="navigate">
搜索
</navigator>
</view>
1.2.3引用组件
在index/index.json中,配置引入组件,代码如下:
{
"usingComponents": {
// 引用封装的组件
"SearchInput":"../../components/SearchInput/SearchInput"
},
"navigationBarTitleText": "优购首页"
}
1.2.4使用组件
在index/index.wxml中使用声明的组件,代码如下:
<!--index.wxml-->
<SearchInput></SearchInput>
1.2.5效果
1.3轮播图
在写轮播图的时候我们可以使用到下程序提供的swiper和swiper-item组件。
1.3.1获取网络接口
onLoad: function (options) {
// 轮播
app.http.swiper().then(res=>{
// console.log(res.data.message)
this.setData({
list:res.data.message
}