更新记录

1.0.1(2020-03-29)

修改部分样式

1.0.0(2020-03-28)

综述

可以实现,页面文章向下滚动后,上方标题栏部分的部分信息隐藏(作者,时间等),但保留其余信息(题目)


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

综述

本组件为可变标题栏,如需改写,请自行改写(目前使用了colorUI,请自行下载)
可变性:当初始时,展示所有文章信息:标题、作者、热度、时间等;但是在逐步上滑动过程中逐步隐藏信息直至只剩题目信息

特别提示

  1. 在实例项目中使用了colorUI,用于获取icon
  2. 请务必使用“实例”进行了解

属性

title

标题:字符串

authorName

作者:字符串

heatCount

热度:数值(可以是点击量或者点赞数)

dateString

时间:字符串。不填默认当前时间

hidden

是否隐藏部分信息:标志。
由于组件本身无法获取 onPageScroll() 方法,所以使用页面传入

//父组件页面中方法:
//其中'aimTitle'是标题栏的id(尽量不要修改)
onPageScroll() {
    var that = this;
    uni.createSelectorQuery().in(this).selectViewport().scrollOffset(res=>{
        console.log(res.scrollTop)
        var nowPosition = res.scrollTop;
        uni.createSelectorQuery().in(that).select('#aimTitle').boundingClientRect(res=>{
            var borderHeight = res.bottom;
            if(borderHeight < nowPosition){
                that.hidden = true;
            }
            else{
                that.hidden = false;
            }
        }).exec()
    }).exec();
},
components:{
    ctv
},
//父组件调用
<ctv :hidden="hidden"></ctv>

样式

请使用:scoped穿透修改

<style>
  .changableTitleView >>> .titleBase{}
</style>

.titleBase

负责底部标题框的基础样式

.border

负责阴影边界样式
如果不要border样式则不必要添加对 onPageScroll() 方法的监听

#title

题目的样式

.detail

除题目外,其他信息的样式(图标使用了colorUI)

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问