微信小程序 动态添加VIEW

最新推荐文章于 2024-03-17 18:14:20 发布
最新推荐文章于 2024-03-17 18:14:20 发布
阅读量823 收藏
点赞数 1
分类专栏： 小程序 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34182649/article/details/107835656
版权

参考资料
https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
https://blog.csdn.net/hxfghgh/article/details/80521890

	<picker-view indicator-style="height: 25px;" style="width: 75%; height: 50px; font-size: 30rpx;" value="{{choice}}" id = choiceIdx bindchange="bindChange">
		<picker-view-column wx:for="{{choice}}" wx:key="choice" wx:for-index="choiceIdx">
			<view wx:for="{{viewDatas[choiceIdx]}}" wx:key="id"  wx:for-index="viewDatasIdx">{{viewDatas[choiceIdx][viewDatasIdx].name}}</view>
		</picker-view-column>
	</picker-view>

嵌套两层循环，外面一层循环choice 里面是picker的值
第二层是viewDatas 按照choice里面的数据显示

在这里插入图片描述
在这里插入图片描述

根据前面的选项改变后面的选项

qq_34182649
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序动态添加view
qq_24767105的博客
05-04 2967
微信小程序动态添加view //index.html <button bindtap='clickMe'> 添加</button> <input type='input' value='{{value}}' placeholder='请输入' bindblur='getValue'></input> <view wx:for="...
小程序自定义组件之插槽
weixin_44253584的博客
04-30 1216
1. 什么是插槽 在自定义组件的 wxml 结构中，可以提供一个**< slot>** 节点（插槽），用于承载组件使用者提供的 wxml 结构。 2. 单个插槽 在小程序中，默认每个自定义组件中只允许使用一个 < slot> 进行占位，这种个数上的限制叫做单个插槽。 2. 多个插槽 在小程序的自定义组件中，需要使用多 < slot> 插槽时，可以在组件的 .js 文件中，通过如下方式进行启用。示例代码如下 Components({ options: { mul
微信小程序动态添加表单模块（view），增删改都可以
09-14
微信小程序动态添加一个表单模块，直接拷贝就能使用 动态添加组件 里面用到了TDesign外部框架，需要npm install 一下 很多项目都通用的功能，动态添加的view包含，input、datepikcer，checkBox多项内容 案例可借鉴性极强，快来下载吧
【微信小程序】动态添加view
XL_0502的博客
05-27 1384
同时微信小程序没有 DOM 对象，一切基于组件化。所以不能通过添加dom来实现动态添加view。，那么只有data里的typeList会更新，视图并不会更新。：想做一个点击按钮添加分类的功能，涉及到动态的添加view。微信小程序是单向数据流。指令基于一个数组来渲染列表。
微信小程序动态生成view结构
比起未来可期，我更喜欢如约而至
11-24 2103
需求描述 如下图所示，虽然现在只有两个控件，但是考虑到后期可能存在业务拓展，现需要使其动态生成。 需求分析 在index.js中存featureList变量保存控件相关数据，记录name,func（点击事件），index.wxml页面遍历featureList，只需要写一个view结构即可。 //index.js featureList: [{ key: '1', name: '卡券核销', func:"onVerifyCard" }, { key
微信小程序之动态添加、删除指定内容(view)和获取input值
最新发布
weixin_42017221的博客
03-17 342
2. input是循环出来的，所以不可能给不同的input绑定不同的 bindInput 事件，那么只有绑定一个输入事件，而且所有的值必须是一个数组的话，就必须要获取到装input的view块的索引，然后通过索引值来修改数组中的值。只要获取到当前需要删除的索引值，然后删除循环内容对应的值就完成了。1. wx:for 循环view，添加一个，wx:for的内容就增加1个，那么循环的内容是用数字来循环还是数组呢？2. 动态添加的内容中有input，最终获取值的时候，要获取到所有input的值并且是一个数组。
微信小程序动态添加view组件的实例代码
10-16
本文通过实例代码给大家介绍了微信小程序动态添加view组件的方法，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序点击view动态添加样式过程解析
10-15
主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
【微信小程序】动态增加组件（以按钮为例）
沙师弟专栏
03-14 2万+
这里的微信小程序动态加载是以按钮为例，主页面点击不同的按钮进入不同的子页面中，根据主页面的title来动态加载子页面按钮的数量以及值。 效果图： wxml文件（注意wx:key="item"要写，不然它会有警告）： <!--pages/plan/plans/plans.wxml--> <view class="className" style="background-...
微信小程序实现动态添加标签（1）
LZ511321的博客
08-19 3万+
说明：最近入住微信小程序，将自己所学经历分享出来，包括学到的知识，踩到的坑，一起分享给大家，后续会慢慢更新： 首先针对一些几乎没有基础的童鞋，附上一些链接，大致看完后能够有能力制作简单的小程序了： 1.官方文档： https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 2.小程序实用入门教程： http://www.j
微信小程序动态添加和删除组件的现实
10-15
主要介绍了微信小程序动态添加和删除组件的现实，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序基础-动态添加和删除组件
newland9999的博客
09-13 1万+
一、基本思路 1、&amp;lt;block wx:for=&quot;{{数组}}&quot;&amp;gt; 组件 &amp;lt;/block&amp;gt; 2、点击添加按钮，增加数组的成员，组件相应增加 点击删除按钮，减少数组的成员，组件相应删除 二、示例 wxml: &amp;lt;view&amp;gt; &amp;lt;button bindtap='onTapAdd'&amp;
微信小程序点击按钮动态添加输入框，点击步进器按钮获取输入框的值进行加减计算--不使用表单
qq_44776950的博客
08-07 3810
微信小程序实现动态添加或删除输入框，参考wx:for列表渲染 搭配vantweapp使用，提高开发效率（例如已实现的步进器） 关键： wx:for列表渲染每个item，达到增加删除的效果 绑定date-index自定义数据，作为下标传递 充分利用数据绑定和中间变量 事件event传参来获取确定的按钮或数据 解决办法： wxml代码： <view wx:for="{{inputList}}" wx:key="id"> <view>序号{{index+1}}</view&gt
微信小程序添加插件
qq_45963071的博客
03-01 1万+
先登录微信公众平台进入小程序管理后台(如图): 滚到底部点击设置: 再点击第三方设置: 点击插件管理右边的添加插件按钮: 选中添加即可添加完成，最后查看添加插件的详情，把插件代码复制到小程序开发工具或者Hbuild小程序里 ...
微信小程序的应用动态添加、修改《二》
weixin_45419424的博客
05-27 433
微信小程序的应用 接着上一节的内容，今天我们学习一下添加和修改 **我们首先来看一下他的运行效果，这里就做一个简单的页面** 现在我们写一个添加的简单页面.wxml <!-- bindsubmit="formSubmit"定义js里面调用添加的方法名 --> <form bindsubmit="formSubmit"> <view style="text-align : center"> <text>添加产品信息</text> &l
微信小程序 动态添加view组件
热门推荐
tsfx051435adsl的博客
10-17 3万+
在web中，我们动态添加DOM，可以用jQuery的方法，很简单。在微信小程序中怎么实现下面这么需求。 其中，里程数代表上一行到这一行地方的距离（这个不重要）；要实现的就是点击增加途径地，就多一行，删除途径地，就少一行。 分析：添加的和删除的是同样的结构，只是数量不一样，所以考虑循环，用列表表示，增加就往这个列表push一个，删除就从列表pop一个。 主要代码如下： &lt;view class...
java se 动态添加视图组件_微信小程序动态添加view组件的实例代码
weixin_36244678的博客
02-24 180
在web中，我们动态添加DOM，可以用jQuery的方法，很简单。在微信小程序中怎么实现下面这么需求。其中，里程数代表上一行到这一行地方的距离(这个不重要)；要实现的就是点击增加途径地，就多一行，删除途径地，就少一行。分析：添加的和删除的是同样的结构，只是数量不一样，所以考虑循环，用列表表示，增加就往这个列表push一个，删除就从列表pop一个。主要代码如下：出 发 地placeholder="请...
微信小程序动态添加元素view
kunwen123的博客
02-23 8159
微信小程序是MVVM结构不存在动态添加元素 换个思路，models通过数组控制view元素显隐 方案： 文件wxml <view wx:for="{{info.details}}" wx:key="key" class="forItemBorder"> <view class="weui-cell weui-cell_input "> <view class...
微信小程序动态添加view组件代码
05-18
在微信小程序中，可以使用 `wx.createSelectorQuery()` 和 `wx.createInnerAudioContext()` 方法来动态添加 View 组件和音频组件。 以下是添加 View 组件的代码示例： ```js // 获取当前页面的节点信息 const query = wx.createSelectorQuery().in(this); query.select('#container').boundingClientRect(res => { // 创建一个新的 View 组件 const newView = this.selectComponent('#new-view'); // 设置新组件的位置和宽高 newView.setData({ top: res.bottom + 10, // 上边距为上一个组件底部+10px left: 10, // 左边距为 10px width: 100, // 宽度为 100px height: 100 // 高度为 100px }); }).exec(); ``` 其中，`#container` 是已有的一个组件，`#new-view` 是需要动态添加的新组件。 以下是添加音频组件的代码示例： ```js // 创建一个新的音频组件 const newAudio = wx.createInnerAudioContext(); // 设置音频资源路径 newAudio.src = 'audio.mp3'; // 监听音频播放完成事件 newAudio.onEnded(() => { console.log('音频播放完成'); }); // 播放音频 newAudio.play(); ``` 需要注意的是，动态添加的组件需要在 WXML 文件中进行定义，否则会出现错误。同时，小程序对动态添加组件的数量和频率也有一定的限制，需要注意控制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值