乐趣区

关于uni-app:uView中吸顶使用

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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

退出移动版