微信小程序的宿主环境实现教程

时间：2022-10-10 编辑：坚强来源：一聚教程网

本文为小伙伴们介绍了关于微信小程序的宿主环境实现教程，感兴趣的小伙伴一起来看看吧。

实现如图的纵向滚动效果


 T
S
J

.container_2 view{


text-align: center;
line-
}
.container_2 view:nth-child(1){
background-color: red;
}
.container_2 view:nth-child(2){
  background-color: yellowgreen;
}
.container_2 view:nth-child(3){
  background-color: blue;
}
.container_2{
  display: flex;
  justify-content: space-around
}
 
.container_2{
  border: 1px solid yellowgreen;
  
  
}

scroll-y 改成 scroll-x

实现如图的横向滚动效果：

 
 横           向           滑           动           演           示

.container_2 view{


text-align: center;
line-
}
.container_2 view:nth-child(1){
background-color: red;
}
.container_2{
  display: flex;
  justify-content: space-around
}
 
.container_2{
  border: 1px solid yellowgreen;
  
  
}

2.swiper 和 swiper-item 组件的基本使用

实现如图的轮播图效果：

.container_3{
  
}
 
.item{
  height: 100%;
  line-
  text-align: center;
}
 
swiper-item:nth-child(1) .item{
  background-color: burlywood;
}
swiper-item:nth-child(2) .item{
  background-color: yellow;
}
swiper-item:nth-child(3) .item{
  background-color: pink;
}
swiper-item:nth-child(4) .item{
  background-color: aqua;
}

.swiper 组件的常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

3.text 组件的基本使用

文本组件

类似于 HTML 中的 span 标签，是一个行内元素

通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：


手机号:
17608777

4.rich-text 组件的基本使用

富文本组件

支持把 HTML 字符串渲染为 WXML 结构

以上就是关于微信小程序的宿主环境实现教程的全部内容了，感兴趣的小伙伴记得点击关注哦。

上一个： dispatchEvent解决重叠元素响应事件教程
下一个：基于 angular material theming 机制修改 mat-toolbar 的背景色教程

推荐专题

最新下载

热门教程

微信小程序的宿主环境实现教程

2.swiper 和 swiper-item 组件的基本使用

3.text 组件的基本使用

4.rich-text 组件的基本使用

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程