微信小程序利用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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
js实现橱窗展示效果
Jan 11 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
文员个人求职自荐信
2013/09/21 职场文书
小学语文国培感言
2014/03/04 职场文书
《春雨》教学反思
2014/04/24 职场文书
护理专业自荐书
2014/06/04 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
MySQL数据库完全卸载的方法
2022/03/03 MySQL
git stash(储藏)的用法总结
2022/06/25 Servers