董懂 发布的文章

微信小程序中,隐藏滚动条的方法,其实就是通用的css:

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

但是在小程序中,它只能隐藏scroll-view组件的滚动条,page中的滚动条还是依然存在。

如果想让页面没有滚动条,可以用一个scrll-view来当做页面的容器,但是这时候可能就没法用page提供的方法了,比如enablePullDownRefresh。如何取舍就要根据实际需要决定了。

微信小程序的input有默认的最小高度

input.png

所以想要重置它们的高度,仅仅设置height是不够的,还要一起设置min-height:

input {
  height: 40rpx;
  min-height: 40rpx;
  /* 或者 */
  min-height: 0;
}

另外,从图中可以看出input已经是block类型的元素了。

一、基本使用

Swiper是一个非常好用的滑动插件,可以用来实现轮播图、代替浏览器默认的滚动条。中文主页:

https://www.swiper.com.cn/

在Vue中,Swiper对应的是Vue-Awesome-Swiper,NPM的地址:

https://www.npmjs.com/package/vue-awesome-swiper

基本的使用比较简单,首先安装Vue-Awesome-Swiper

npm install vue-awesome-swiper --save

- 阅读剩余部分 -

大部分时间,Vue都用来开发单页面应用程序(single page web application,SPA),但有时也需要开发多页面应用,这就要配置Vue CLI。有两种方式来配置Vue CLI,一是在项目的package.json中添加一个vue字段,在这个字段中配置相关的功能,二是在项目根目录新建一个vue.config.js,这个文件会被Vue CLI合并到webpack的配置中。这里以vue.config.js为例,来配置一个多页面的应用。

- 阅读剩余部分 -

接触Vue以来,觉得Vue的文档不太友好,知识点太碎片化,可能一个重要的知识点仅仅在文中提一下,但不会出现在索引中。文档读起来也比较晦涩。

有一个router-view

<router-view class="content"></router-view>

假设下面的组件会渲染到上面的router-view中:

<template>
    <div class="box">
        ...
    </div>
</template>

- 阅读剩余部分 -

Vue中的混入(mixin)是一个比较简单的知识点。熟悉CSS预处理语言比如lesssass的开发者对mixin肯定很熟悉。Vue中的mixin几乎跟less等里面的mixin一样,都是将定义好的一些功能原样注入Vue组件当中,也有些类似面向对象编程中的继承(我只是说类似:) )。

mixin是一个对象,这个对象的属性可以是Vue实例或者组件实例的生命周期钩子、属性等,当全局混入或者混入到组件后,Vue实例或者组件实例就拥有了mixin中定义的生命周期钩子、属性等等。如果两者中有重复的,会按照一定的规则合并。

- 阅读剩余部分 -