小程式開發 各種Demo的記錄部落格
阿新 • • 發佈:2022-03-18
前言
學習小程式的Demo記錄部落格
橫向排列ViewDemo
效果圖
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; }
縱向與橫向滾動View
效果圖
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