前言
此篇博客讲解微信小程序的数组与列表,在微信小程序里二者一般是组合使用的关联性较强,所以放在一篇博客里讲解。 所以包含.js中data{}数组的样式、.js的数据处理、wx:for、.wxml里view与scroll-view,view与scroll-view的实现列表的区别.
一个简单的列表
这个例子不加入.js data 数据的概念,只使用了view来实现了列表。
效果图:
viewdemo.wxml
<!--pages/demo/demo.wxml--> <view class="demoview"> <view>1</view> <view>2</view> <view>3</view> </view>
viewdemo.wxss
/* pages/demo/demo.wxss */ .demoview view{ width: 100px; height: 100px; /* 文字排列 */ text-align:center; /* 行高 */ line-height: 100px; } /* 指定某个child view的风格 */ .demoview view:nth-child(1){ background-color: lightskyblue; } .demoview view:nth-child(2){ background-color:lightgreen; } .demoview view:nth-child(3){ background-color:lightsalmon; } .demoview{ /* 排列方式 */ display:flex; /* 排列的时候的间距 元素中的各项周围留有空白*/ justify-content: space-around; }
纵向与横向滚动
效果图
scrollview.wxml
<!--pages/scrollview/scrollview.wxml--> <!-- scroll-y 允许纵向滚动 --> <!-- scroll-x 允许横向滚动 --> <view> <scroll-view class="scrollview" scroll-y> <view>A</view> <view>B</view> <view>C</view> <view>D</view> <view>E</view> <view>F</view> <view>G</view> </scroll-view> <scroll-view class="scrollview2" scroll-x> <view>1</view> <view>2</view> <view>3</view> <view>4</view> <view>5</view> <view>6</view> <view>7</view> </scroll-view> </view>
scrollview.wxss
/* pages/scrollview/scrollview.wxss */ /* ==================纵向=================== */ .scrollview view{ width: 100%; height: 30%; /* 文字排列 */ text-align: center; line-height: 100px; background-color: white; } .scrollview :nth-child(1){ /* 背景颜色 */ background-color: lightsalmon; } .scrollview :nth-child(2){ background-color: lightgreen; } .scrollview :nth-child(3){ background-color: lightskyblue; } .scrollview :nth-child(4){ /* 背景颜色 */ background-color: lightgoldenrodyellow; } .scrollview{ background-color: wheat; /* 红色边框线 */ border: 1px solid red; /* 纵向滚动必须给与高度 */ height: 250px; width: 100%; } /* ===================横向=================== */ .scrollview2 view{ width: 30%; height: 100%; /* 文字排列 */ text-align: center; line-height: 300px; background-color: white; /* 子view设置一行 */ display: inline-block } .scrollview2 :nth-child(1){ /* 背景颜色 */ background-color: lightsalmon; } .scrollview2 :nth-child(2){ background-color: lightgreen; } .scrollview2 :nth-child(3){ background-color: lightskyblue; } .scrollview2 :nth-child(4){ /* 背景颜色 */ background-color: lightgoldenrodyellow; } .scrollview2{ background-color: wheat; border: 1px solid red; height: 250px; width: 100%; /* 不换行,单行显示 */ white-space: nowrap; /* 排列方向设置 宫格 */ display: flex; /* 排列方式设置为 一行 */ flex-direction:row; }
End