1. 开发环境 uni-app+uView
2. 电脑系统 windows10 专业版
3. 在应用 uni-app+uView 开发的过程中, 咱们常常会应用到各种性能, 上面我来分享一下,uni-app+uView 中如何应用吸顶和遇到的问题! 心愿对你有所帮忙!
4. 在 template 中增加如下代码:
<!-- 吸顶内容 -->
<view id="chenceiling">
<u-sticky offset-top="0">
<!-- 搜寻性能 -->
<view class="chen-search">
<u-search
placeholder="请输出客户名称 / 联系电话 / 公司名称"
:clearabled="true"
@custom="chensearch"
v-model="keyword"
></u-search>
</view>
<!-- 搜寻性能 完结啦 -->
<!-- 新增 -->
<view class="chen-add" @click="chenadd">
<u-icon name="plus-circle"></u-icon>
</view>
<!-- 新增 完结啦 -->
</u-sticky>
</view>
<!-- 吸顶内容 完结啦 -->
// 留神: 这个 offset-top="0" 是间隔顶部的间隔, 也是间隔顶部多少间隔的时候开始吸顶
5. 如何自定义吸顶模板的色彩呢, 在 css 中增加如下代码:
#chenceiling {
//u-sticky-wrap u6zTsRZKbLyLFJ0S5VVMfiXblSXCLc2F
/deep/ .u-sticky-wrap {
background: blue;
/deep/ .u-sticky {background: blue;}
}
}
// 留神: 我在这里应用的是 scss 语法, 看到这里的小伙伴都是会 scss 语法的, 如果还不会 scss 语法的小伙伴倡议去学习一下!
6. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!