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


Posted in Javascript onMarch 05, 2020

问题描述

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

解决方案

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

}

最终效果:

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

总结

到此这篇关于微信小程序利用for循环解决内容变更问题的文章就介绍到这了,更多相关小程序内容变更内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
再探JavaScript作用域
Sep 24 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
vue时间格式化实例代码
Jun 13 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
基于node.js之调试器详解
Aug 22 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
javascript将16进制的字符串转换为10进制整数hex
Mar 05 #Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 #Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 #Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 #Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 #Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 #Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 #Javascript
You might like
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
php图片上传类 附调用方法
2016/05/15 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python处理中文标点符号大集合
2018/05/14 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python中web框架的自定义创建
2019/09/08 Python
django orm模块中的 is_delete用法
2020/05/20 Python
如何用python处理excel表格
2020/06/09 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
大学生创业计划书的格式要求
2013/12/29 职场文书
高三体育教学反思
2014/01/29 职场文书
顶撞领导检讨书
2014/01/29 职场文书
申报优秀教师材料
2014/12/16 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书