初二信息课网站怎么做,网络运维工程师简历范文,有没有什么免费的网站,旅游网络推广怎么做小程序组件是由宿主环境提供的#xff0c;开发者可以基于组件快速搭建出页面结构。官方把小程序组件分为9类。 视图容器基础内容表单组件导航组件媒体组件map地图组件canvas画布组件开放能力无障碍访问 常用视图组件 view 官网传送门 普通视图区域 类似于HTML中div#x…小程序组件是由宿主环境提供的开发者可以基于组件快速搭建出页面结构。官方把小程序组件分为9类。 视图容器基础内容表单组件导航组件媒体组件map地图组件canvas画布组件开放能力无障碍访问 常用视图组件 view 官网传送门 普通视图区域 类似于HTML中div是一个块级元素 我们使用view进行一个简单的flex布局。结果如图 wxml view classcontainerviewA/viewviewB/viewviewC/view /viewwxss /* pages/test/test.wxss */ .container{display: flex;flex-direction: row;justify-content: space-between;padding: 0; } .container view:nth-child(1){flex-grow: 1;background: goldenrod;text-align: center;height: 100rpx;line-height: 100rpx; } .container view:nth-child(2){flex-grow: 1;background: chocolate;text-align: center;height: 100rpx;line-height: 100rpx; } .container view:nth-child(3){flex-grow: 1;background: yellowgreen;text-align: center;height: 100rpx;line-height: 100rpx; }scroll-view 官网传送门 可滚动视图区域。使用竖向滚动时需要给scroll-view一个固定高度通过 WXSS 设置 height。组件属性的长度单位默认为px2.4.0起支持传入单位(rpx/px)。 使用scroll-view做一个简单的滚动布局。结果如图 wxml scroll-view classcontainer scroll-yviewA/viewviewB/viewviewC/view /scroll-viewwxss /* pages/test/test.wxss */ .container{width: 50vw;height: 50vh;padding: 0; } .container view:nth-child(1){background: goldenrod;text-align: center;height: 20vh;line-height: 20vh; } .container view:nth-child(2){background: chocolate;text-align: center;height: 20vh;line-height: 20vh; } .container view:nth-child(3){background: yellowgreen;text-align: center;height: 20vh;line-height: 20vh; }横向滚动结果如图 wxml scroll-view classcontainer scroll-xviewA/viewviewB/viewviewC/view /scroll-viewwxss .container{width: 500rpx;white-space: nowrap;height: 100rpx;padding: 0; } .container view:nth-child(1){display: inline-block;width: 200rpx;background: goldenrod;text-align: center;height: 100rpx;line-height: 100rpx; } .container view:nth-child(2){display: inline-block;width: 200rpx;background: chocolate;text-align: center;height: 100rpx;line-height: 100rpx; } .container view:nth-child(3){display: inline-block;width: 200rpx;background: yellowgreen;text-align: center;height: 100rpx;line-height: 100rpx; }swiperswiper-item 官网传送门 简单的swiper示例 wxml swiper classswiper-container indicator-dots circularswiper-itemview classitemA/view/swiper-itemswiper-itemview classitemB/view/swiper-itemswiper-itemview classitemC/view/swiper-item /swiperwxss .swiper-container{height: 200rpx; } .swiper-container .item{width: 100%;text-align: center;height: 200rpx;line-height: 200rpx;background-color: lightskyblue; } swiper-item:nth-child(1) .item{background: lightskyblue; } swiper-item:nth-child(2) .item{background: lightsalmon; } swiper-item:nth-child(3) .item{background: lightpink; }常用基础内容组件 text 官网传送门 内联文本只能用 text 组件不能用 view如 foo bar 新增 span 组件用于内联文本和图片如 bar 更多用法参考官方文档 官方文档入口