微信小程序动态增加按钮组件

2024-02-15 22:35:14

这里的微信小程序动态加载是以按钮为例，主页面点击不同的按钮进入不同的子页面中，根据主页面的title来动态加载子页面按钮的数量以及值。

效果图：

wxml文件（注意wx:key="item"要写，不然它会有警告）：

<!--pages/plan/plans/plans.wxml-->
<view class="className" style="background-color: rgb(225, 218, 211); height:{{className_height}}px" wx:for="{{array}}" wx:key="item">
 <button class="items" id="{{stv.id[index]}}">{{item.name}}</button>
</view>

这里起关键作用的是wx:for，这里是循环。

wxss文件：

/* pages/plan/plans/plans.wxss */
.items {
 background-color: rosybrown;
 width:60%;
}

js文件：

// pages/plan/hot/hot.js

Page({
 data: {
 },
 onLoad: function (options) {
  var that = this;
  var arr = new Array();
  if (options.title == "热门") {
   var location1 = { name: "1" };
   var location2 = { name: "2" };
   var location3 = { name: "3" };
   var location4 = { name: "4" };
   var location5 = { name: "5" };
   var location6 = { name: "6" };
   arr.push(location1);
   arr.push(location2);
   arr.push(location3);
   arr.push(location4);
   arr.push(location5);
   arr.push(location6);
   console.log("OK");
  } else {
   var location1 = { name: "2" };
   var location2 = { name: "4" };
   var location3 = { name: "5" };
   arr.push(location1);
   arr.push(location2);
   arr.push(location3);
  }
  wx.setNavigationBarTitle({title:'创建新计划--'+options.title});
  wx.getSystemInfo({
   success: function (res) {
    that.setData({
     //view
     className_height: res.windowHeight / arr.length,
     //btn
     array: arr,
    })
   }
  })
 },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序按钮滑动的实现方法

微信小程序按钮滑动的实现方法一.先看东西滑动前滑动后二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&
微信小程序实现登录遮罩效果

目标: 用户点击提交.登录等按钮时,防止多次提交,所做的遮罩层步骤: 实现很简单,按钮加上disabled属性,用true和false控制. 效果图: 代码: wxml  <loading hidden="{{hidden}}"> 登录中... </loading> <view class="container-login"> <form catchsu
微信小程序利用css实现遮罩效果实例详解

微信小程序利用css实现遮罩效果实例详解实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi
微信小程序登录按钮遮罩浮层效果的实现方法

前言近期在写一点小东西,碰到遮罩...所以将实现的过程分享出来,供大家参考学习,下面话不多说了,来一起看看详细的介绍吧逻辑如下: 1:第一次登陆的时候会有一个登录按钮遮罩浮层提示去授权登录 2:在弹出的授权框里,拒绝授权按钮的时候,界面的数据没有办法加载出来,允许授权的时候,界面就能渲染从后端拿过来的数据 3:判断是否授过权(判断是第一次登录还是第n次),如果用户第一次已经登录授权,后面继续登录的时候悬浮框就不会再出现效果如下: 代码如下: index.html <!-- 授权弹框提示 -
微信小程序动态增加按钮组件

这里的微信小程序动态加载是以按钮为例,主页面点击不同的按钮进入不同的子页面中,根据主页面的title来动态加载子页面按钮的数量以及值. 效果图: wxml文件(注意wx:key="item"要写,不然它会有警告):  <view class="className" style="background-color: rgb(225, 218, 211); height:{{
微信小程序动态添加view组件的实例代码

在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas
微信小程序动态添加和删除组件的现实

一.基本思路 1.通过改变数组长度动态增删组件 <block wx:for="{{数组}}"> 组件 </block> 2.点击添加按钮,增加数组的成员,组件相应增加点击删除按钮,减少数组的成员,组件相应删除二.示例 wxml: <view> <button bindtap='onTapAdd'>添加input组件</button> <button bindtap='onTapDel'>删除Input组件<
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能

做微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存.以下是说明及简化后的代码: 1.页面加载完成时,所有input处于禁用状态: 2.点击编辑按钮时,文字切换成"保存",身份证input保持始终不可修改状态(即禁用), 姓名input可以修改(即动态加载切换禁用/启用): 3.再次点击按钮文字切回"编辑",所有input变为禁用状态. 以下是wxml部分 <view class="btn"> <button bindt
微信小程序实现自定义弹窗组件的示例代码

目录编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果那么,首先,我们创建一个组件新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx
微信小程序动态设置图片大小的方法

我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性: 1.src 图片资源地址 2.mode 图片裁剪.缩放的模式 3.binderror 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 4.bindload 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height
微信小程序自定义modal弹窗组件的方法详解

微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class
微信小程序常用视图容器组件使用详解

目录 1.组件概述 2.常用的试图容器组件 2.1view 2.2scroll-view 2.3swiper 1.组件概述组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果.当打开某款小程序之后,界面中的图片.文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果.一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式. 其语法格式如下: <标签名称属性="值">内容<
微信小程序自定义顶部导航组件

本文实例为大家分享了微信小程序自定义顶部导航组件,供大家参考,具体内容如下在components中新建文件夹navbar components/navbar.wxml  <view class="navbar" style="height:{{navHeight+5}}px;background-image:url('{{imgUrl}}') "> <!-- 左上角返回按
微信小程序中的swiper组件详解

微信小程序中的swiper组件微信小程序中的swiper组件真的是简单方便提供了页面中图片文字等滑动的效果 <swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper> 这里的就是一个滑块视图容器:而就是你希望滑动的东西,可以是文字也可以是image 其中swipe

微信小程序动态增加按钮组件

相关推荐

随机推荐