backgroundC。。。
⼀、页⾯滚动到指定位置(即实现锚点的功能)
项⽬需求:在页⾯中,不管位于何处,点击评论按钮页⾯滚动到对应的评论位置。
解决⽅案:将uniapp的ateSelectorQuery()⽅法与uni.pageScrollTo(OBJECT)⽅法结合使⽤。
更详细⽤法见官⽅⽂档:
实现思路如下:
uni.pageScrollTo({
duration:0,
p
})
}).exec();
但是你会发现,在页⾯没有滚动之前点击评论按钮可以直接滚动到评论,如果我页⾯有滚动,滚动距离就会出现偏差。
这是因为滚动到实际距离是元素距离顶部的距离减去最外层盒⼦的滚动距离。
最终实现代码如下:
toComment () {
ateSelectorQuery().select('.article-box').boundingClientRect(data => {
ateSelectorQuery().select('#Comment').boundingClientRect(res => {
uni.pageScrollTo({
scrollTop: p - p - 10
})
}).exec()
}).exec()
}
其中ateSelectorQuery()有⼀点需要注意的是下⾯这点:,它是将选择器的选取范围更改为⾃定义组件 component 内,返回⼀个 SelectorQuery 对象实例。(初始时,选择器仅选取页⾯范围的节点,不会选取任何⾃定义组件中的节点)。
⼆、在uni-app项⽬中设置背景颜⾊和⼩程序设置 backgroundColor⽆效的问题
主页壁纸怎么设置 在DCloud的官⽅提供的⽂档中写的⽅法是,如下
但是实际设置了之后,没有作⽤,然后搜了⼀下说是因为 backgroundColor 指的窗体背景颜⾊,⽽不是页⾯的背景颜⾊,即窗体下拉刷新或上拉加载时露出的背景。
因此采⽤了直接在全局样式中设置page的样式(也可以写在app.vue中),如下:
page {
background-color: #FFFFFF;
}
三、导航栏设置⾓标及动态控制修改⾓标数字
1、导航栏设置⾓标:
"buttons": [...,{
"fontSrc": "/f",
"text": "\ue873",
"fontSize": "22px",
"color": "#999999",
"badgeText": "0"
}],
⽐较简单,直接按官⽹⽂档来即可。其中:badgeText 就是⽤来设置⾓标数字的。
2、动态修改⾓标数字
(1)创建⾓标:注意⾓标的index,只有app下才可以使⽤哦
// #ifdef APP-PLUS
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let currentWebview = page.$getAppWebview();
currentWebview.setTitleNViewButtonBadge({ index: 0, text: '10' }); //text必须是string类型// #endif
(2)移除⾓标
四、导航的⾃定义按钮上的红点动态控制
在page.json页⾯写好路由
"buttons": [{
{
"fontSrc": "/f",
"text": "\ue744",
"fontSize": "27",
"color": "#303133",
"background": "rgba(0,0,0,0)",
"redDot": true//红点
}
]
动态设置红点的显⽰与隐藏,index是按钮的下标
// #ifdef APP-PLUS
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const currentWebview = page.$getAppWebview();
count == 0
?currentWebview.hideTitleNViewButtonRedDot({index:1}) // 隐藏
: currentWebview.showTitleNViewButtonRedDot({index:1}) // 显⽰
/
/ #endif
五、动态修改tabBar的内容
官⽅API:
uni.setTabBarItem({
index: 2,
pagePath: "/pages/datalk/datalk",
text: '数说',
iconPath: "/static/tabBar/datalk.png",
selectedIconPath: "/static/tabBar/datalked.png"
})
发布评论