主页是程序开发中绕不开的话题，结合项目模块述说下主页设计实现
首页
这个项目来说，首先有一个底部的导航栏，使用于页面切换
对于底部导航的实现并不复杂,只需要在app.json中配置tab信息就可以，实例如下
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",//tab路径
"text": "首页",//tab标题
"iconPath": "/img/index.png",//tab图标
"selectedIconPath": "/img/indexSelect.png"//tab选中后的图标
},
{
"pagePath": "pages/Order/Order",
"text": "订单",
"iconPath": "/img/dingdan.png",
"selectedIconPath": "/img/dingdanSelect.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "/img/wode.png",
"selectedIconPath": "/img/wodeSelect.png"
}
]
},
项目实例的首页分为四个部分，第一部分为一个循环播放图片，第二部分为搜索框，第三部分为标签，第四部分为循环列表
轮播图
首先为最上方循环播放图片的实现，使用<swiper>组件,前端源码如下
<swiper style="height:310rpx;" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{arr}}" wx:key="index">
<swiper-item>
<image src='{{item.home_url}}' style='width:100%;' bindtap='img_gg'
mode="widthFix" data-s='{{item.Article_ID}}'></image>
</swiper-item>
</block>
</swiper>
先讲解下头部的几个参数
- indicator-dots="{{indicatorDots}}" 是否显示面板指示点
- autoplay="{{autoplay}}" 是否自动切换
- interval="{{interval}}" 自动切换时间间隔
- duration="{{duration}}" 滑动动画时长
- circular="true" 是否采用衔接滑动
这些参数基本设计了内部内容的滑动状态
<block>常用于进行条件渲染，
wx:for="{{arr}}" ，代表对绑定数据{{arr}}进行for循环，逐个读取arr数组中的数据进行循环，对标签内部的子数据调用采用{{item}}，代表当前循环从{{arr}}中取出来的子数据。
wx:key="index"指主键，可以没有。
<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
<swiper-item>仅可放置在swiper组件中，宽高自动设置为100%。内部添加<image>标签设置轮播的图片，也可以是其他的东西。
详细讲解下<image>中的参数
- src='{{item.home_url}}'设置图片的url，因为小程序的大小限制，一般图片文件都是不放在小程序内的，放于服务器中，通过url来获取图片
- bindtap='img_gg' 绑定后台方法
- mode="widthFix" 设置图片的缩放模式，防止图片被压扁
- data-s='{{item.Article_ID}}'小程序自定义的属性
<image src='{{item.home_url}}' style='width:100%;' bindtap='img_gg'
mode="widthFix" data-s='{{item.Article_ID}}'></image>
对于上方述说的data-s自定义属性的获取为
img_gg: function(e) {
var id = e.currentTarget.dataset.s;
wx.navigateTo({
url: '/pages/details/details?id=' + id,
});
},
对于自定义属性建议都写为小写，因为在获取值的时候无论前台定义的大小写到后台都会变为小写。
第二部分的设计为搜索框，先看前端的源码
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text"
class="weui-search-bar__input"
confirm-type='search' //右下角按钮为“搜索”
placeholder="搜索目的地/线路/关键字" //无输入时显示
value="{{SearchData.value}}" //input中的value值
bindblur='SearchInput'//失去焦点后触发后台方法
bindconfirm="SearchConfirm" /> //点击完成时触发
</view>
</view>
</view>
后台SearchInput方法通过e.detail.value得到输入框内的value值，传入下一个页面跳转
//搜索框跳转函数 传入搜索内容 以及下一页的界面标题
SearchInput: function(e) {
wx.navigateTo({
url: '/pages/list/list?cont=' + e.detail.value + '&title=列表页',
});
}
第三部分的六个标签采用模版
<template name="staffName">
<view style='width:235rpx;text-algin:center;border: 1rpx solid #efeff4;' bindtap='{{sort1.tzlby}}'
data-s='{{sort1.Title}}'>
<view style='width:100rpx;height:96rpx;margin-left:55rpx;margin-top:28rpx;'>
<image src='{{sort1.Url}}' style='width:110rpx;height:110rpx;' mode="widthFix"></image>
</view>
<view style='width:100%;margin-top:20rpx;text-align: center;'>
<text style='font-size:20rpx;'>{{sort1.Title}}</text>
</view>
</view>
</template>
<view style='width:675rpx;height:200rpx;border: 1rpx solid #efeff4; display:flex;
flex-direction:row;margin-left:39rpx'>
<template is="staffName" data="{{sort1}}"></template>
<template is="staffName" data="{{sort2}}"></template>
<template is="staffName" data="{{sort3}}"></template>
<template is="staffName" data="{{sort4}}"></template>
<template is="staffName" data="{{sort5}}"></template>
<template is="staffName" data="{{sort6}}"></template>
</view>
<template name="staffName">定义模型，然后使用is方法调用对应的模型，data传入模型数据{{...sort1}}传入的是sort1打开后的数据。
第四部分为循环列表,前端源码为
<view wx:for="{{arr2}}" wx:key="index" bindtap='img_gg' data-s='{{item.Article_ID}}'>
<view style='width:674rpx;margin-left:40rpx;border: 1rpx solid #efeff4;margin-top:5%;margin-bottom:3%'>
<image wx:if="{{item.home_url == 0}}" src='/img/timg.gif' style='width:674rpx;height:110rpx;' mode="widthFix"></image>
<image wx:else src='{{item.home_url}}' style='width:674rpx;height:270rpx;' ></image>
<view>
<text class="names" style='font-size:24rpx;'>{{item.Title}}</text>
</view>
<view style='width:674rpx;display:flex;flex-direction:row;margin-top:16rpx;'>
<view style='width:40rpx;height:40rpx'>
<image src='/pages/index/img/index_37.jpg' style='width:37rpx;height:37rpx;' mode="widthFix"></image>
</view>
<view style='margin-left:40rpx;width:275rpx;line-height:28rpx;'>
<text style='font-size:24rpx'>时长:</text>
<text style='font-size:24rpx;margin-left:30rpx;color:red;' wx:if='{{item.Day==""}}'>0天</text>
<text style='font-size:24rpx;margin-left:30rpx;color:red;' wx:else>{{item.Day}}日游</text>
</view>
<view style='margin-left:200rpx;line-height:12rpx'>
<text style='font-size:20rpx;color:#F8772B'>￥</text>
</view>
<view style='line-height:21rpx;'>
<text style='font-size:36rpx;color:#F8772B' wx:if="{{item.Money2==''}}">{{item.Money}}</text>
<text style='font-size:36rpx;color:#F8772B' wx:elif='{{item.Money2==0}}'>{{item.Money}}</text>
<text style='font-size:36rpx;color:#F8772B' wx:else>{{item.Money2}}</text>
</view>
<view style='line-height:21rpx;margin-right:15rpx;'>
<text style='font-size:20rpx'>起</text>
</view>
</view>
</view>
</view>
通过前面学到的知识，很容易就能看出第四部分，就是通过wx:for="{{arr2}}"列表渲染来实现循环列表，在最外层view标签内的都是循环的内容，根据后台的data数组来完成数据绑定。
这中间使用了wx:if="{{item.Money2==''}}，wx:elif='{{item.Money2==0}}'，wx:else，这些都是条件渲染，根据后台数据绑定的值来判断这个控件是否进行渲染显示。
关于控件的样式等就不做多的描述了，就是基础的css，了解到这里基本已经熟悉前后数据交互，渲染处理，完成一般的项目已经没什么问题了，接下来讲解有关支付，地图等商业需要的功能。
