微信小程序利用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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
phpwind放自动注册方法
Dec 02 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
Node 自动化部署的方法
Oct 17 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 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
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
微信小程序自定义组件
2017/08/16 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python 装饰器重要在哪
2021/02/14 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
三年级科学教学反思
2014/01/29 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
激励口号大全
2014/06/17 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015年国庆节广播稿
2015/08/19 职场文书