专栏首页算法与编程之美微信小程序|利用for循环解决内容变更问题

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

问题描述

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

解决方案

整体思路是创建一个数组,将页面内容写进数组,利用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;
}

最终效果:

图 1 效果图

结语

创建数组,将元素放入数组中,利用for循环来遍历数组,改变数组中的内容就可以快速的来改变页面和添加页面的内容。

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:王卓越

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端|CSS信封的制作方法

    利用Hbuilder来制作一个信封,此处使用的是先制作信封边框再进行文字加入的方法来设计。

    算法与编程之美
  • 前端|如何用HTML打印一个六边形

    六边形在我们网页的制作中,运用得并不是特别广泛。但在一些制作精美,要求创新的一些网页上,我们还是不难看到六边形的身影,如下图1.1所示。用六边形组合的蜂窝状图形...

    算法与编程之美
  • 如何设计一个简单的网站首页

    网站首页是一个网站的入口网页。对于一个网站的了解往往是通过他的首页。首页的主要作用就是引导互联网用户浏览网站其他部分的内容。网站首页上展现的这部分内容一般被认为...

    算法与编程之美
  • css3(animate)

    天天_哥
  • 前端基础-CSS定位

    注意:偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 (向下走)

    cwl_java
  • css实用手册」CSS 垂直居中的七种方法

    我之所以整理这类专题的手册,就是CSS相关的内容实在太零散,同时又夹杂着相关的兼容问题。遇到问题时,我们有时过度依赖搜索引擎进行求证解决,解决完也没做认真的归纳...

    前端迷
  • 「css实用手册」CSS 垂直居中的七种方法,值得收藏

    我之所以整理这类专题的手册,就是CSS相关的内容实在太零散,同时又夹杂着相关的兼容问题。遇到问题时,我们有时过度依赖搜索引擎进行求证解决,解决完也没做认真的归纳...

    前端达人
  • CSS 鼠标悬停图片,显示隐藏文本

    我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

    Nian糕
  • css3 过渡和2d变换——回顾

    1.transition   语法:transition: property duration timing-function delay;       tr...

    用户1197315
  • 可输入文字的div标签

    当我们在标签里面加入了contentEditable属性,这个标签就会变为可编辑状态。

    刘亦枫

扫码关注云+社区

领取腾讯云代金券