小程序通用页面 第1篇
运行项目:
好了 到这里列表加载更多 公用写法,基本都说完了,如果小伙伴还有疑问,可以 公众号 加群,我们一起进步
本案例下载地址:
- End -
▽
小程序通用页面 第2篇
微信小程序允许在顶层放置一个文件,里面采用 CSS 语法设置页面样式。这个文件的设置,对所有页面都有效。
注意,小程序虽然使用 CSS 样式,但是样式文件的后缀名一律要写成.wxss
。
打开上一篇教程的示例,在项目顶层新建一个文件,内容如下。
上面代码将整个页面的背景色设为粉红,然后将标签的字体大小设为 24 磅,字体颜色设为蓝色。
可以看到,页面的背景色变成粉红,文本字体变大了,字体颜色变成了蓝色。
实际开发中,直接对标签设置样式,会影响到所有的文本。一般不这样用,而是通过class
属性区分不同类型的文本,然后再对每种class
设置样式。
打开pages/home/
文件,把页面代码改成下面这样。
上面代码中,我们为标签加上了一个class
属性,值为title
。
然后,将顶层的文件改掉,不再直接对设置样式,改成对
class
设置样式。
上面代码中,样式设置在 class 上面(.title
),这样就可以让不同的class
呈现不同的样式。修改之后,页面的渲染结果并不会有变化。
小程序通用页面 第3篇
如果页面的所有样式都自己写,还是挺麻烦的,也没有这个必要。腾讯封装了一套 UI 框架 WeUI,可以拿来用。
手机访问 ,可以看到这套 UI 框架的效果。
这一节就来看看,怎么使用这个框架的小程序版本 WeUI-WXSS,为我们的页面加上官方的样式。
首先,进入它的 GitHub 仓库,在dist/style
目录下面,找到这个文件,将源码全部复制到你的文件的头部。
然后,将page/home/
文件改成下面这样。
开发者工具导入项目代码,页面渲染。
可以看到,加入 WeUI 框架以后,只要为按钮添加不同的 class,就能自动出现框架提供的样式。你可以根据需要,为页面选择不同的按钮。
这个示例中,元素使用了下面的class
。
WeUI 提供了大量的元素样式,完整的清单可以查看这里。
小程序通用页面 第4篇
小程序原生的
上面页面的图片上面,有三个提示点,表示一共有三张图片,可以切换显示。
它的代码很简单,只需要改一下文件即可。
上面代码中,组件就是轮播组件,里面放置了三个
组件的indicator-dots
属性设置是否显示轮播点,autoplay
属性设置是否自动播放轮播。它们的属性值都是一个布尔值,这里要写成{{true}}
。这种{{...}}
的语法,表示里面放置的是 JavaScript 代码,这个放在下一次讲解。