每周记录第一期

最新推荐文章于 2025-09-10 09:07:54 发布

转载最新推荐文章于 2025-09-10 09:07:54 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b11f4c55188257d86687467

文章标签：

#javascript #前端 #ViewUI

本文介绍了Scroller组件在移动端的使用技巧，包括解决首次渲染无法上拉的问题，并分享了Vue中日期格式转换、v-if闪烁问题的解决方案及Vue JSX语法示例。

`Scroller`组件(sfmui)

移动端页面首次渲染无法上拉，会自动回弹。但刷新一下后，就可以顺利上拉。暂时解决办法是在mounted钩子中手动调用 this.$nextTick(() => this.$refs.scrollery.loadEnd()) 方法重置一下loadmore加载更多操作。

移动端高度自适应神属性：`calc() = calc(四则运算)`

height:calc(100% - 30px)//父元素高度 - 30px
height:calc(80vh - 30px)//80%可视区域高度 - 30px
四则运算符号两边注意空格隔开

Vue

Vue:<span>{{ dateStr.replace(/-/g,'.') }}</span>//日期yyyy-MM-dd格式转化为yyyy.MM.dd;
- 直接使用偶尔报错，可在computed中使用replace()方法，替换直接在插值表达式中使用情况
v-if="boolean"控制页面部分标签是否显示，首次渲染时出现闪烁情况，v-cloak完美解决,boolean默认为false
Vue-JSX常用语法：
- 在使用JSX时，几乎所有的内置Vue指令都不受支持，唯一的例外是v-show，它可以与v-show=value语法一起使用。v-if可以转化为三元表达式，而v-for可以转化为array.map()表达式，等等。

<div
      // 普通属性或组件
      id="foo"
      // DOM属性是用“domProps”进行前缀的
      domPropsInnerHTML="bar"
      // 事件监听使用 `on` 或者`nativeOn`前缀
      onClick={this.clickHandler}
      nativeOnClick={this.nativeClickHandler}//自定义组件使用
      // 其他特殊顶级属性
      class={{ foo: true, bar: false }}
      style={{ color: 'red', fontSize: '14px' }}//可适当使用三元表达式 style={{color: this.status=='已失效'?"#999":"#333"}}
      key="key"
      ref="ref"
      // assign the `ref` is used on elements/components with v-for
      refInFor
      slot="slot">
</div>
复制代码

阿里-RAP 前端mock数据神器RAP详细教程：模拟后台接口数据

常用mockjs语法，生成规则和示例
- 'name|min-max': string 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。 ;'name|count': string通过重复 string 生成一个字符串，重复次数等于 count。
- 'name|+1': number 属性值自动加 1，初始值为 number。'name|min-max': number生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。