微信小程序|利用for循环解决内容变更问题

算法与编程之美

发布于 2020-03-13 11:37:58

8400

发布于 2020-03-13 11:37:58

文章被收录于专栏：算法与编程之美算法与编程之美算法与编程之美

问题描述

学习小程序的小伙伴可能会有这样的问题：微信小程序的页面内容要发生改变，在小程序中如何快速的来创造一个格式相同，但仅仅改变内容且易于改变的页面呢？接下来就来解决这个问题吧。

解决方案

整体思路是创建一个数组，将页面内容写进数组，利用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",
        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循环所循环的数组，此处的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;
}

最终效果：