开始

本节课来开发项目的首页
image.png

把之前的demo删除掉
image.png

默认的首页
image.png

真机配置

https://uniapp.dcloud.io/collocation/pages.html#pages
image.png

image.png
因为目前是在app上做的真机调试，所以这里我们先配置app-plus
https://uniapp.dcloud.io/collocation/pages.html#style
image.png

image.png

首先滚动条我们先隐藏起来。
image.png
image.png
滚动条显示策略，不显示滚动条

  1. "style": {
  2.                 "app-plus": {
  3.                     "scrollIndicator": "none"
  4.                 }
  5.             }

导航栏-搜索框配置

image.png

image.png
我们这里左边一个按钮 右边也有一个按钮
image.png
搜索框的样式先弄出来。 1.6的版本之后才出的。
image.png

image.png

我们需要它的文字居中
image.png

取色器 吸取一个文本框的背景色
image.png

文本框需要圆角
image.png
圆角，用px表示的
image.png

image.png
文本框内的提示文本
image.png
image.png

  1. "titleNView": {
  2.                         "searchInput": {
  3.                             "align": "center",
  4.                             "backgroundColor": "#F7F7F7",
  5.                             "borderRadius": "4px",
  6.                             "placeholder": "搜索糗事"
  7.                         }
  8.                     }

提示文本的颜色
image.png

image.png

  1. "placeholderColor": "#CCCCCC"

我们希望点击的时候，直接跳转到搜索页。所以这里禁止搜索输入。
image.png

image.png

  1. "disabled": false

真机效果。
image.png
image.png

搜索框左右的按钮

image.png

image.png
我们的需求就是要左右这两个图标
image.png
在阿里巴巴的iconfont上找到对应的。针对这个项目的所有的图标会发给大家。
image.png
吸取左边按钮的颜色。
image.png

button和searchInput同级别
image.png

image.png
右边颜色
image.png

右边按钮
image.png
按钮按下的颜色 默认给他一个灰色。
image.png
按钮的浮动。
image.png
一左一右
image.png
图标的大小
image.png
先默认给个40试试
image.png
字体文件的路径。
image.png
这是下载好的字体库。
image.png
我们主要用到.ttf的文件
image.png
创建font目录，把这个点ttf的文件 粘贴到这里。
image.png
改个名字
image.png

image.png

  1. "buttons": [
  2.                             // 左边
  3.                             {
  4.                                 "color": "#FF9616",
  5.                                 "colorPressed": "#BBBBBB",
  6.                                 "float": "left",
  7.                                 "fontSize": "40px",
  8.                                 "fontSrc": "/static/font/icon.ttf"
  9.                             }
  10.                         ]

text是必须要配置的。
image.png
打开这个html
image.png
打开后第一个就是Unicode
image.png
image.png
必须是\u开头。
image.png
前面的不要，就复制后面的e609
image.png
那么我们就是\u开头，后面加e609
image.png

  1. {
  2.                                 "color": "#FF9616",
  3.                                 "colorPressed": "#BBBBBB",
  4.                                 "float": "left",
  5.                                 "fontSize": "40px",
  6.                                 "fontSrc": "/static/font/icon.ttf",
  7.                                 "text": "\ue609"
  8.                             }

右边按钮。
image.png

image.png

  1. // 右边按钮
  2.                             {
  3.                                 "color": "#000000",
  4.                                 "colorPressed": "#BBBBBB",
  5.                                 "float": "right",
  6.                                 "fontSize": "40px",
  7.                                 "fontSrc": "/static/font/icon.ttf",
  8.                                 "text": "\ue653"
  9.                             }

最后的逗号要去掉
image.png

测试

image.png

图标大小改成22 试试
image.png
禁用输入文本。
image.png

image.png

image.png

结束