展开菜单

微信小程序input组件点击输入时placeholder文字上移

微信小程序input组件点击输入时placeholder文字上移

微信小程序原生组件input文本输入框,点击聚焦后,placeholder占位符文字位置会向上编移,原因是input使用了box-sizing: border-box;样式的同时添加了上下内边距(padding)或上下外边距(margin),解决方法可以把box-sizing:border-box;或者上下内外边距去掉。 示例: wxml代码 <input type="text" confirm-type="search" placeholder-class="placeholder" placeholder="输入关键词搜索"/> wxs...

微信小程序前端Tab切换内容代码

微信小程序常用的小交互效果,简单的tab切换,点击菜单选项,切换到对应指数的内容模块。 wxml代码 <view class="tabBtn"> <block wx:for="{{tabBtn}}" wx:key="index"> <view class="item{{curTab == index ? ' active' : ''}}" bindtap="clickTab" data-idx="{{index}}">{{item}}</view> </block> </view> <...

小程序实现点击拨打电话api接口wx.makePhoneCall

在需要点击拨打电话的标签上绑定一个点击事件bindtap,代码: <view class="call" bindtap="makeCall">拨打电话</view> 在点击事件的方法里使用wx.makePhoneCall Page({ data: { phone:'400 888 8888', }, makeCall:function(){ wx.makePhoneCall({ phoneNumber:this.data.phone //或者直接phoneNumber:'400 888 8888' ...

微信小程序input文本框获得焦点或失去焦点时获取的value值

微信小程序分别获取点击input文本框取得焦点时的value值,失去input文本框焦点时的value值。 wxml代码: <input type="text" bindblur="blurVal" bindfocus="focusVal" value="{{keyword}}"/> js代码 Page({ data: { keyword: '' }, bindblur: function(event){ var val = event.detail.value; console.log(val); }, ...

微信小程序获取data:{}变量时报错xxx is not defined

在data:{}声明初始化了一个变量,在onLoad:function()函数调用时,出现“xxx is not defined”错误,原因是直接使用了变量名,没有使用获取页面data对象的this.data 会报错的原代码: Page({ data: { text:'Welcome' }, onLoad: function(options){ console.log(text); }, }) 正确写法 Page({ data: { text: 'Welcome' }, onLoad: function...

微信小程序前端开发:底部导航配置属性Tabbar教程

微信小程序前端开发:底部导航配置属性Tabbar教程

Tabbar是固定在页面底部的导航栏的配置属性,下面是添加方法及参数说明。 注意: Tabbar导航栏至少需要添加2个菜单,最多五个,否则会报错。 一般代码结束符号是;分号,小程序代码的结束符号是,逗号。 编辑全局配置文件app.json,在第一层花括号{}里添加代码(参数在后面) "tabBar":{ "color":"#333333", "selectedColor":"#128ff9", "borderStyle":"black", "list":[ ...