微信小程序01——scroll-view

最新推荐文章于 2022-12-13 19:31:00 发布

scorpioto

最新推荐文章于 2022-12-13 19:31:00 发布

阅读量65

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/scorpioto/article/details/125474376

版权

这篇博客介绍了如何在微信小程序中使用`scroll-view`组件创建类似淘宝最左边的纵向导航。内容包括在`list.wxml`中设置滚动视图及子元素，并在`list.wxss`中定义样式，使每个导航项具有不同的背景颜色和固定尺寸。

摘要由CSDN通过智能技术生成

大概就是淘宝最左边那种纵向导航

list.wxml
<!--pages/list/list.wxml-->
<text>pages/list/list.wxml</text>
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

list.wxss
/* pages/list/list.wxss */
.container1 view{
  width:100px;
  height:100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: aquamarine;
}
.container1 view:nth-child(2){
  background-color: azure;
}
.container1 view:nth-child(3){
  background-color: bisque;
}
.container1{
  border:1px red;
  height: 200px;
}