吴昕霏 發表於 2019-9-14 04:29:00

配置uni-app导航栏上按钮

<p>查看uni-app官网，buttons配置即可</p>
<p>例子：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span>"pages": [ <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages</span>
<span style="color: rgba(0, 0, 0, 1)">      {
            </span>"path": "pages/index/index"<span style="color: rgba(0, 0, 0, 1)">,
            </span>"style"<span style="color: rgba(0, 0, 0, 1)">: {
                </span>"app-plus"<span style="color: rgba(0, 0, 0, 1)">: {
                  </span>"titleNView"<span style="color: rgba(0, 0, 0, 1)">: {
                        </span>"searchInput"<span style="color: rgba(0, 0, 0, 1)">: {
                            </span>"align": "center"<span style="color: rgba(0, 0, 0, 1)">,
                            </span>"backgroundColor": "#eee"<span style="color: rgba(0, 0, 0, 1)">,
                            </span>"borderRadius": "5px", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 只能用px作单位</span>
                            "placeholder": "请输入内容"<span style="color: rgba(0, 0, 0, 1)">,
                            </span>"placeholderColor": "#ccc"<span style="color: rgba(0, 0, 0, 1)">
                        },
                        </span>"buttons"<span style="color: rgba(0, 0, 0, 1)">: [{
                            </span>"color": "#F0AD4E"<span style="color: rgba(0, 0, 0, 1)">,
                            </span>"colorPressed": "#eee"<span style="color: rgba(0, 0, 0, 1)">,
                            </span>"float": "left"<span style="color: rgba(0, 0, 0, 1)">,
                            </span>"fontSize": "22px"<span style="color: rgba(0, 0, 0, 1)">,
                            </span>"fontSrc": "/static/iconfont.ttf", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 字体文件</span>
                            "text": "\ue65d" <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 字体图标\u 开头，加上字体图标unicode后面四位</span>
<span style="color: rgba(0, 0, 0, 1)">                        },
                        {
                           </span>"color": "#333"<span style="color: rgba(0, 0, 0, 1)">,
                           </span>"colorPressed": "#eee"<span style="color: rgba(0, 0, 0, 1)">,
                           </span>"float": "right"<span style="color: rgba(0, 0, 0, 1)">,
                           </span>"fontSize": "22px"<span style="color: rgba(0, 0, 0, 1)">,
                           </span>"fontSrc": "/static/iconfont.ttf", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 字体文件</span>
                           "text": "\ue678" <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 字体图标\u 开头，加上字体图标unicode后面四位</span>
<span style="color: rgba(0, 0, 0, 1)">                        }
                        ]
                  }
                }
            }
      }
    ],
    </span>"globalStyle"<span style="color: rgba(0, 0, 0, 1)">: {
      </span>"navigationBarTextStyle": "black"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"navigationBarTitleText": "uni-app"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"navigationBarBackgroundColor": "#F8F8F8"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"backgroundColor": "#F8F8F8"<span style="color: rgba(0, 0, 0, 1)">
    }
}</span></pre>
</div>
<p>效果：</p>
<p><img src="https://img2018.cnblogs.com/blog/1563435/201909/1563435-20190914042857642-581138695.png"></p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/luguankun/p/11518231.html
頁: [1]
查看完整版本: 配置uni-app导航栏上按钮