微信小程序利用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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
详解Angular路由之路由守卫
May 10 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
python概率计算器实例分析
2015/03/25 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
解决python 上传图片限制格式问题
2019/10/30 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
大学生求职信范文应怎么写
2014/01/01 职场文书
派出所所长先进事迹
2014/05/19 职场文书
四风问题查摆材料
2014/08/25 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014年调度员工作总结
2014/11/19 职场文书
教师业务学习材料
2014/12/16 职场文书
运动会闭幕词
2015/01/28 职场文书
校友回访母校寄语
2015/02/26 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
python保存图片的四个常用方法
2022/02/28 Python
nginx 配置指令之location使用详解
2022/05/25 Servers