|
作者：huangenai，来自原文地址 一：JS动态修改样式微信小程序这个坑啊，js动态修改样式，我们并不能用js或者jq 轻轻松松一行代码搞定。或者用removeClass addClass 来修改样式。 以下是一种动态修改样式的方法，原理是绑定数据，然后动态的修改数据，从而实现动态样式的改变而已。感觉有点········那个啥的，怪怪的。不过也没办法了。如果你有更好的方法，可以在评论区分享一下。 test.wxml <view style="text-align: center;"> <label style="color:{{color}};">我会变色</label> <button bindtap="clickRed">变红</button> <button bindtap="clickgreen">变绿</button></view>
test.js Page({ data: { color: "red" }, clickRed: function () { this.setData({ color: "red" }) }, clickgreen: function () { this.setData({ color: "green" }) }})
效果：
网友评论：
问：我遇到一个问题，wx:for 了 100 个 view，其中有一个需要加上 .active 类，且可点击换成另一个 view 带 .active，为了使 transition 有效，又不能用 wx:if，你会怎么做呢
答：有个比较笨的方法 <view class="first" wx:for=""><view class="active"></view></view>
.first .active{}.second .active{}
你可以动态的去改变 view的class 切换就可以
问：原本想错了，可以带三目运算的，
比如： <view wx:for="" class="{{dateCurrent==item.id?'active':''}}"></view>
二：获得用户输入内容在微信小程序里，如何获得用户输入的内容？？ js： document.getElementById("Content").valuejq:$("#Content").val()
在微信小程序中并不能这样写。 可以通过组件的属性 bindchange 将用户输入的储存存起来 test.wxml <input id="postalCode" bindchange="bindChange" type="number" placeholder="输入邮政编码" auto-focus /><input id="mail" bindchange="bindChange" type="number" placeholder="请输入邮箱地址" />
test.js var inputContent = {}Page({ data: { inputContent: {} }, bindChange: function(e) { inputContent[e.currentTarget.id] = e.detail.value }})
后台输出
如果你有更好的方法实现获得用户输入内容，欢迎在评论区评论 三：引用其他js里的方法微信小程序中，在微信官方开发文档我们可以知道 小程序的目录结构 。 一个小程序页面由四个文件组成，一个小程序页面的四个文件具有相同路径与文件名，由此我们可知一个小程序页面对应着一个跟页面同名的js文件。可是当有些公共方法，我们想抽离出来成为一个独立公共的js文件。我们该如何实现呢。
在根目录下有一个app.js文件。这个根目录的js 文件我们可以通过getApp()轻松调用。 //app.jsApp({ globaData:'huangenai' })复制代码//test.jsvar app = getApp();Page({ onLoad: function () { console.log(app.globaData); } })
在开发者工具的 Console可以看到
那么当一些通用的公共方法我们抽出来，在根目录下新建一个utils文件夹，新建util.js在这里我们可以将通用的方法写在这。 util.js//正则判断function Regular(str, reg) { if (reg.test(str)) return true; return false;}//是否为中文function IsChinese(str) { var reg = /^[\u0391-\uFFE5]+$/; return Regular(str, reg);}module.exports = { getRequestUrl: "http://localhost:59637",//获得接口地址 IsChinese: IsChinese,}
//test.js var util = require('../../utils/util.js');Page({ onLoad: function () { console.log("判断是否为中文:"+util.IsChinese('测试')); console.log("输出接口url："+util.getRequestUrl); }})
在开发者工具的 Console可以看到
注意了，在util.js里的 Regular（）方法，我们不可以这样调用util.Regular()，因为我们没有用 module.exports 来暴露模块接口 如果直接 调用则会出现这样的错误 thirdScriptErrorutil.Regular is not a function;at "pages/test/test" page lifeCycleMethod onLoad functionTypeError: util.Regular is not a function
| 
收藏