WeChatウィジェットを利用してfor循環で内容変更問題を解決します。

問題の説明
小プログラムを学習する子供たちは、このような問題があるかもしれません。WeChatウィジェットのページの内容を変更するには、小プログラムの中でどのように速く同じフォーマットを作成しますか？これからこの問題を解決しましょう。
ソリューション
全体の考え方は、行列を作成し、ページの内容を行列に書き込み、forループを利用して配列を巡回する目的で、配列の変数を利用してページの内容を変更することを実現します。
第1ステップ：まずjsページでdataにsumsという配列名を作成し、配列にコンテンツを追加します。
コードの例:

data: {

sums:[{

imgone:"/pages/img/      .jpg",

imgtwo:"/pages/img/      .jpg",

imgthree:"/pages/img/    .png",

textone:"      ",

texttwo:"      "

},{

imgone: "/pages/img/      .jpg",

imgtwo: "/pages/img/    .jpg",

imgthree: "/pages/img/    .png",

textone: "      ",

texttwo: "    "

},{

imgone: "/pages/img/           .jpg",

imgtwo: "/pages/img/     .jpg",

imgthree: "/pages/img/    .png",

textone: "           ",

texttwo: "     "

}

]

第二ステップ：forサイクルを利用して、私たちの配列sumsを遍歴します。 。
コードの例:

<block wx:for="{{sums}}">

<view class="type-line">

<view class="imageone">

<image class="img-one" src="{{item.imgone}}" mode="aspectFill"></image>

<image class="img-two" src="{{item.imgthree}}"></image>

<text >{{item.textone}}</text>

</view>

<view class="imageone">

<image class="img-one" src="{{item.imgtwo}}" mode="aspectFill"></image>

<image class="img-two" src="{{item.imgthree}}"></image>

<text >{{item.texttwo}}</text>

</view>

</view>

</block>

forループで循環する配列を利用して、ここの アイテムは、行列が循環するここの要素を表します。
ステップ3：cssスタイルを追加します。
コードの例:

.type-line{

display: flex;

flex-flow: row;

justify-content: space-evenly;

}

.search{

margin-top: 5px;

margin-left: 50px;

width: 160px;

height: 25px;

border-radius: 20px;

background-color: whitesmoke

}

.titleone{

width: 100%;

height: 50px;

display: flex;

flex-flow: row

}

.imagesize{

width: 20px;

height: 20px;

}

.images{

width: 40px;

height: 40px;

margin-left: 15px;

border-radius: 50%;

}

.boxs{

width: 100px;

height: 30px;

}

.imagesone{

margin-left: 60px;

width: 25px;

height: 25px;

margin-top: 5px;

}

.imageone{

margin-top: 20px;

width: 180px;

height: 150px;

border-radius: 10px;

background-color: whitesmoke;

}

最終効果:

締め括りをつける
ここで、WeChatウィジェットを利用して、for循環で内容変更問題を解決する文章を紹介します。より多くの関連プログラム内容の変更内容は私達の以前の文章を検索してください。または、下記の関連記事を引き続き閲覧してください。これからもよろしくお願いします。