1.设置全局字体样式app.wxss: text{ font-family:MicroSoft yahei; } 2.设置弹性盒子模型: .container{ /*弹性模型*/ display:flex; /*垂直方向 列方向 排布*/ flex-direction:column; /*居中*/ align-items:center; /*要从整体解决排布的问题是最好的方案*/ } 3.设置页面全屏样式及背景色: page{ height:100%; background:#b3d4db; }

微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q

微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml 1 2 3 <modal hidden="{{hidden}}" title="这里是title" c

方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊. 整体来说zoom属性与transform:scale属性主要存在如下几点差异 1.zoom的缩放是相对于左上角的:而scale默认是居中缩放:2.zoom的缩放改变了元素占据的空间大小:而scale的缩放占据的原始尺寸不变,页面布局不会发生

开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin.qq.com/miniprogram/dev/component/input.html wxml: <view class='page_row' bindtap="suo"> <view class="search"> <view cla

异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便样式排版,手机号码输入框跟验证码输入框是一样宽的,获取验证码的层以绝对定位的方式固定在手机号码输入框的右边,如下: 对于H5来说,这个并没有什么影响,但是小程序中,这种排版,就不行了. 光标一旦进入文本框,在没有收起输入键盘或者点击文本框外其他地方的时候,文本框的聚焦状态是不会改变的. 也就是说上边

小程序中是没有直接的下拉框标签可以使用的,所以下拉框需要手动写,或者使用框架 因为考虑到下拉框展开的时候,可能需要遮挡住其余的样式,这里就用的cover-view标签.(不考虑遮挡的可以换成普通的view标签) 1:视图添加以下代码: <view class="search-bar"> <view class="condition" bindtap="showCondition"> <view class="

在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html 1.首先需要写点击触发事件 <view class='text' bindtap='chooseSezi'>请选择:颜色/尺码</view> 这是点击之后需要弹出的内容,为了方便我把里面的内容去掉了,maskLayer是遮罩层,choose是内容 <!--隐藏区域 --&g

modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="

功能实现界面 data: { checkboxItems: [ { name: '全天(1-8节)', value: 'allday' }, { name: '上午(1-4节)', value: 'am' }, { name: '下午(5-8节)', value: 'pm' }, { name: '晚上(晚自习)', value: 'night' }, ] } 想要实现的功能 四个复选框中只能选一个,且选中另一个会取消其余选中,且能保存选择的value值 JS代码实现 checkboxChang

loading:提示框: 效果: loading和toast和像,只不过 toast 是设置结束时间,时间到了去触发bindchange事件,进行隐藏. 但是 loading 是没有办法设置事件让其隐藏的,需要手动进行设置. 代码: <loading hidden="{{onOff}}">默认</loading> 例如:设置定时器模拟,进行隐藏 setTimeout(function(){ this.setData({onOff:true}); },2000);

model弹框:在屏幕中间弹出,让你进行选择: 效果: 代码: <button type="primary" bindtap="btnclick">按钮</button> <modal title="标题" confirm-text="确认" cancel-text="取消" hidden="onOff" bindconfirm="modalCon

描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> <view class="wrap" hidden="{{!myVisible}}"> <view class="mask {{visible ? 'mask-show' : ''}}" bindtap="_onCancel&q

单选框radio: 可以通过color属性来修改颜色. 复选框checkbox:

https://blog.csdn.net/qq_41681675/article/details/81005561

在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的值.像我项目中,需要获取到的是它对应的Id,那么我们如何通过它的这个下标值返回你想要的值呢? 通过picker返回的索引值,去获取匹配你想获取的值; js文件 Page({ data:{ //户型 这是一个本地的对象,然后绑定到页面上 pic_array: [ { id: 13, name: ‘1室1厅1卫‘ }, { id: 14, name: ‘1室2厅1卫‘ }, { id: 15, name: ‘2室1厅1卫‘ }, { id:

官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}"> 内容 </modal>

组件已经传到github,自行下载:https://github.com/JinZhenZon/miniapp-customModel 支持如下配置: {  outWidth <number> 外框的宽度  outHeight <number> 外框的高度  outRadius <number> 外框的弧度  showIcon <boolean> 是否显示icon  iconClass <string> icon的class(只可以使用iconf

>>下拉组件 1.组件结构: 2.index.js: //index.js Component({ /** * 组件的属性列表 */ properties: { propArray: { type: Array, } }, /** * 组件的初始数据 */ data: { selectShow: false,//初始option不显示 selectText: "请选择",//初始内容 }, /** * 组件的方法列表 */ methods: { //option的显示与否

效果图如下: 核心代码如下: delType:function(e){ var typeId = e.currentTarget.dataset['id']; console.log("delete:"+typeId) wx.showModal({ title: '提示', content: '确认要删除该支出类型?', success: function (res) { if (res.confirm) { console.log('用户点击确定') wx.request({ url

1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { console.log('遮罩层禁止页面滑动') },