1. 9*9 乗算表
test.wxml
<view class='con' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
<view style='display:inline-block;width:45px' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
<view wx:if="{{j<=i}}">
{{i}}*{{j}}={{i*j}}
</view>
</view>
</view>test.wxss
.con{
font-size:8px;
}2. ウィンドウのスクロール
XX.wxml
<scroll-view class='aa' scroll-y="ture"> <view class="a"> 1 </view> <view class="b"> 2 </view> <view class="c"> 3 </view> </scroll-view>
XX.wxss
/* pages/news/news.wxss */
.aa{
width:200px;
height: 100px;
}
.a{
height: 200rpx;
background-color: red;
}
.b{
height: 200rpx;
background-color: gold;
}
.c{
height: 200rpx;
background-color: green;
}この例は垂直スクロールです
| 説明 | スクロール- x | ||
|---|---|---|---|
| 水平スクロールを許可 | scroll-y | Boolean | |
| 垂直スクロールを許可 | 上限閾値 | 数値 | |
| もっと上から/ left 遠い場合 (単位 px)、scrolltoupper イベントがトリガーされます | lower-threshold | Number | |
| 下/右からどのくらい離れているか (単位 px)、scrollto Lower イベントがトリガーされます | scroll-top | Number | |
| 垂直スクロールバーの位置を設定 | scroll-left | Number | |
| 水平スクロールバーの位置を設定 | scroll-into-view | 文字列 | |
| 値は特定の子要素IDである必要があり、その要素までスクロールすると、要素の上部がスクロール領域の上部に揃えられます | bindscrolltoupper | EventHandle | |
| 上部までスクロール/左、scrolltoupper イベント | bindscrollto lower | EventHandle | |
| 下/右にスクロール、scrollto lower イベント | bindscroll | EventHandle | |
| スクロール時にトリガー、event.detail = {scrollLeft 、scrollTop、scrollHeight、scrollWidth、deltaX、deltaY} | 使用方法 垂直スクロールする場合、 |
<scroll-view/>
3. 画像カルーセル
XX.wxml<swiper indicator-dots="ture" autoplay="ture" interval="1000" duration="1000">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src='{{item}}'></image>
</swiper-item>
</block>
</swiper>
XX.jsimgUrls:[
"../image/1.png",
"../image/2.png",
"../image/3.png"
],
属性名
| 説明 | indicator-dots | ||
|---|---|---|---|
| パネルインジケータードットを表示するかどうか | autoplay | Boolean | |
| 自動的に切り替えるかどうか | current | Number | |
| 現在のページのインデックス | interval | Number | |
| 自動切り替え時間間隔 | duration | Number | |
| スライドアニメーションの長さ | bindchange | EventHandle | |
| 現在の変更時にchangeイベントがトリガーされます。event.detail = {current: current} | 注意：其中只可放置 四、弹性布局 父元素设置display：flex 相关知识点： Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局。
Webkit 内核的浏览器，必须加上
注意，设为 Flex 布局以后，子元素的 二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 项目默认沿主轴排列。单个项目占据的主轴空间叫做 三、容器的属性以下6个属性设置在容器上。
3.1 flex-direction属性
它可能有4个值。
3.2 flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。
它可能取三个值。 （1）
（2）
（3）
3.3 flex-flow
3.4 justify-content属性
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
3.5 align-items属性
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
3.6 align-content属性
该属性可能取6个值。
四、项目的属性以下6个属性设置在项目上。
4.1 order属性
4.2 flex-grow属性
如果所有项目的 4.3 flex-shrink属性
如果所有项目的 负值对该属性无效。 4.4 flex-basis属性
它可以设为跟 4.5 flex属性
该属性有两个快捷值： 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 4.6 align-self属性
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
