微信小程式利用for迴圈解決內容變更問題
阿新 • • 發佈：2020-03-06
問題描述
學習小程式的小夥伴可能會有這樣的問題：微信小程式的頁面內容要發生改變，在小程式中如何快速的來創造一個格式相同，但僅僅改變內容且易於改變的頁面呢？接下來就來解決這個問題吧。
解決方案
整體思路是建立一個數組，將頁面內容寫進陣列，利用for迴圈來達到遍歷陣列的目的，從而實現利用陣列的變數來改變頁面的內容。
第一步：首先在 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",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迴圈所迴圈的陣列，此處的item 代表陣列所迴圈此處的元素。
第三步：新增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;
}最終效果：
總結
到此這篇關於微信小程式利用for迴圈解決內容變更問題的文章就介紹到這了,更多相關小程式內容變更內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！