小程序默认样式 // 默认样式 button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:1; border-radius:5px; -…

微信开发工具里面,无法展示编译后的一些样式,如::before,::after这些伪类.有时候我们需要修改一些组件的默认样式会略感到麻烦,因为不知道是通过哪里控制的. 我就平常遇到的一些修改默认样式,做一下汇总,不定期更新: 1.button的背景色,边框,圆角: button{ background-color: transparent; } button::after { border:; border-radius:0 } 2.swiper 的点的位置: .wx-swiper-dots.w…

button默认有边框,边框用“border : none”去掉就不可以,边框依然存在, 使用 button::after{ border: none; } 来去除边框,边框就没了 wxml: <button class="bf_input_down" formType="submit">开始配对</button> wxss: .bf_input_down{display: block;width: 124px;height: 36px;ba…

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图:     从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者…

微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | block | inline-block. position.float来实现布局,缺乏灵活性且有些适配效果难以实现.比如像下面这种常见的信息列表,要求内容高度不确定下保持垂直居中: 这种情况下,我们更建议用flex布局. 在开始介绍flex之前,为了表述方便,我们约定以下术语:采用flex布局的元素…

微信小程序授权页面,进入小程序如果没授权跳转到授权页面,授权后跳转到首页,如果用户点拒绝下次进入小程序还是能跳转到授权页面,授权页面如下 app.js  中的 onLaunch或onShow中加如下代码,如果没授权跳转到授权页面 // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserI…

关键:    position: fixed; wxml: <navigator url="/pages/issue/index"><image class='img' src='/assets/images/Home/add.png' bindtap='add'></image></navigator> wxss: .img{ float: right; position: fixed; bottom: 120rpx; right: 2…

为了适应广大的前端开发者,WXSS 具有 CSS 大部分 特性.同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改.与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入. 补充:关于扩展的特性我们下面会说,既然文档说了WXSS具有CSS 大部分特性,那么有什么不同那? 1.没有body 是的,在小程序的每一个page里是没有body属性的,不过你可以通过在wxss中对page的设置来影响整个页面的样式,比如下面的代码 page { background:#F8F8F8…

1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下: data: { array: [{ text: '数组' }] } onLoad:function(){ this.data.array[0].text=1; console.log(this.data.array[0].text); } 修改代码: onLoad:func…

button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默认的 mini 小尺寸 type: 类型 字符串 按钮的样式类型 属性值:default 默认的 primary 绿色的 warn 红色的 plain: 类型 布尔 按钮是否镂空,背景色透明 disabled: 类型 布尔 是否禁用 loading:   类型 布尔 名称前是否带有 加载 的图标 f…