1.2全局引入//在app.vue中引入2.设置页面底部的tabber2_uniapp 全局样式">
赞
踩
1.1单独引入样式
//在该页面的style中单独引入
<style>
@import url("./a.css");
</style>
1.2全局引入
//在app.vue中引入
<style>
@import url("./static/css/iconfont.css");
/*每个页面公共css */
/* 在这里定义的样式,全局都能生效 */
</style>
2.1.在pages.json中增加tabbar
"tabBar":{ //这是设置默认的颜色 "color":"#ff1030", //这是选中时候的颜色 "selectedColor":"#F0AD4E", //这是list的列表,里面设置每个页面 "list":[ { //页面的名字 "text":"首页", //页面的路径 "pagePath":"pages/index/index", //页面未选中时候的图片 "iconPath":"static/tabs/home.png", //页面选中时候的图片 "selectedIconPath":"static/tabs/home-active.png" }, { "text":"信息", "pagePath":"pages/messages/messages", "iconPath":"static/tabs/message.png", "selectedIconPath":"static/tabs/message-active.png" }, { "text":"聊天", "pagePath":"pages/news/news", "iconPath":"static/tabs/contact.png", "selectedIconPath":"static/tabs/contact-active.png" } ] },
{ "path" : "pages/messages/messages", "style" : { //头部信息 "navigationBarTitleText": "信息页面", //开启下拉刷新 "enablePullDownRefresh": true, //头部的背景颜色 "navigationBarBackgroundColor":"#007AFF", //为h5页面设置的下拉颜色 "h5":{ "pullToRefresh":{ "color":"#4CD964" } } } }
//1.onPullDownRefresh开启下拉刷新 onPullDownRefresh() { console.log('触发了下拉'); setTimeout(()=> { this.list.push('666') //停止刷新 uni.stopPullDownRefresh() },500) }, //2.在pages里面用"enablePullDownRefresh": true开启下拉刷新 //3.通过定义方法的点击事件 methods <button @click="refresh">刷新</button> refresh() { uni.startPullDownRefresh() }
onReachBottom() {
console.log('触底了');
this.list = [...this.list,...['前端','后端','ui','测试','前端']]
},
<button @click="getLunbo">获取轮播图</button>
getLunbo() {
uni.request({
url: "http://localhost:8082/api/getlunbo",
success (res) {
console.log(res);
}
})
},
setSrorage() { // uni.setStorage({ // key: 'id', // data: 66, // success() { // console.log('存储成功'); // } // }) uni.setStorageSync('id',1000) }, getInfo() { // uni.getStorage({ // key: "id", // success(res) { // console.log(res.data); // } // }) const res = uni.getStorageSync('id') console.log(res); } claer() { // uni.removeStorage({ // key: 'storage_key', // success(res) { // console.log('success'); // } // }); uni.removeStorageSync('storage_key'); }
**写法:**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
#ifdef:if defined 仅在某平台存在
#ifndef:if not defined 除了某平台均存在
%PLATFORM%:平台名称
8.1写法示例
#ifdef APP-PLUS
需条件编译的代码
#endif
//仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif
//除了 H5 平台,其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif
//在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)
8.2**%PLATFORM%** 可取值如下:
#APP-PLUS App #APP-PLUS-NVUE或APP-NVUE App nvue #H5 H5 #MP-WEIXIN 微信小程序 #MP-ALIPAY 支付宝小程序 #MP-BAIDU 百度小程序 #MP-TOUTIAO 字节跳动小程序 #MP-LARK 飞书小程序 #MP-QQ QQ小程序 #MP-KUAISHOU 快手小程序 #MP-JD 京东小程序 #MP-360 360小程序 #MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序 #QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为) #QUICKAPP-WEBVIEW-UNION 快应用联盟 #QUICKAPP-WEBVIEW-HUAWEI 快应用华为
8.3写法示例
<!-- #ifdef H5 -->
<view>我只要在H5里面看见</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>我只要在小程序看见</view>
<!-- #endif -->
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。