微信小程序利用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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
9个JavaScript日常开发小技巧
Oct 06 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
php+mysql写的简单留言本实例代码
2008/07/25 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
深入理解js promise chain
2016/05/05 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
纯JS实现轮播图
2017/02/22 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Python通过future处理并发问题
2017/10/17 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
3个CCIE对一个工程师的面试题
2012/05/06 面试题
儿科护士自我鉴定
2013/10/14 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
高效课堂教学反思
2016/02/24 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
一条 SQL 语句执行过程
2022/03/17 MySQL
MySQL数据管理操作示例讲解
2022/12/24 MySQL