微信小程序:如何实现两个按钮在最右侧并排
要实现的效果:

wxml端代码:
<view class="prepare_param">
<view class="prepare_confirm1">
<button size="mini" type="primary" bindtap="deleteById" data-id="{{item.id}}">作废</button>
</view>
<navigator class="prepare_confirm2" url="/pages/prepare_addAndEdit/index?prepare_id={{item.id}}&supplyId={{item.supplyId}}">
<button size="mini" type="primary">修改</button>
</navigator>
</view>
样式代码
.prepare_param {
.prepare_confirm1{
padding-left: 350rpx;
}
.prepare_confirm2{
width: 150rpx;
float: right;
}
}
分析:
将一个div分成两部分,将右侧的按钮的宽度设置成略大于按钮本身的宽度,并让整个div移动到最右端。剩余的宽度为左侧按钮所在div的总宽度,此时设置padding-left的宽度,实现
让左侧按钮无限接近右侧按钮

微信小程序:如何实现两个按钮在最右侧并排的更多相关文章
- 微信小程序picker组件两列关联使用方式
在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...
- 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)
(一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...
- 微信小程序一个页面多个按钮分享怎么处理
首先呢,第一步先看api文档: 组件:button https://developers.weixin.qq.com/miniprogram/dev/component/button.html 框架- ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 关于微信小程序的一些总结
mpvue? {{}} 在vue和小程序中的区别? 01 小程序中{{}}和vue中的{{}}用法基本一致,可以显示data中的数据,可以写表达式 不一样的地方? 01 小程序的{{}}可以写在属性中 ...
- 微信小程序之onLaunch与onload异步问题
所述问题: 前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录,获取系统后台的用户基本信息.再此之前,一直以为微信小程序中的 ...
- 微信小程序 View:flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
- 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序
1.前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间.连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保 ...
- 微信小程序—setTimeOut定时器的坑
原文地址: http://fanjiajia.cn/2018/06/27/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E2%80%94setTimeOu ...
随机推荐
- [The Preliminary Contest for ICPC Asia Nanjing 2019] L-Digit sum
题意 $S_{b}(n)$表示数字$n$在$b$进制下各位的和,对于给定的数$N$和$b$,求出$\sum_{n=1}^{N}S_{b}(n)$ $[ link ]$ 分析 题解上写的是签到题,这是个 ...
- 2019牛客暑期多校训练营(第八场)B-Beauty Values(期望线性性)
>传送门< 题意:思路:期望的线性性(可加性),比赛的时候写的代码超级无敌长,不过值得欣慰的是一发AC了,官方的题解写的还不错~ 我们可以把每种数字对答案的贡献分开来计算,即枚举每个数字, ...
- Codeforces Round #608 (Div. 2) E. Common Number (二分,构造)
题意:对于一个数\(x\),有函数\(f(x)\),如果它是偶数,则\(x/=2\),否则\(x-=1\),不断重复这个过程,直到\(x-1\),我们记\(x\)到\(1\)的这个过程为\(path( ...
- Codeforces Round #578 (Div. 2) C. Round Corridor (思维,数论)
题意: 有一个分两层的圆盘,每层从12点方向均分插入\(n\)和\(m\)个隔板,当内层和外层的隔板相连时是不能通过的,有\(q\)个询问,每次给你内层或外层的两个点,判断是否能从一个点走到另外一个点 ...
- 二叉树增删改查 && 程序实现
二叉排序树定义 一棵空树,或者是具有下列性质的二叉树:(1)若左子树不空,则左子树上所有结点的值均小于它的根结点的值:(2)若右子树不空,则右子树上所有结点的值均大于它的根结点的值:(3)左.右子树也 ...
- Linux 搭建网站
wget http://dl.wdlinux.cn/lanmp_laster.tar.gz tar zxvf lanmp_laster.tar.gz sh lanmp.sh https://www.w ...
- System.Windows.Forms.Help
在开发过程中,基本都需要实现帮助功能,而一般帮助功能就是打开一个帮助文档,System.Windows.Forms提供了Help类用于打开帮助文档,挺方便的. Help类提供的方法如下: Name ...
- 2019南昌网络赛H The Nth Item(二阶线性数列递推 + 广义斐波那契循环节 + 分段打表)题解
题意: 传送门 已知\(F(n)=3F(n-1)+2F(n-2) \mod 998244353,F(0)=0,F(1)=1\),给出初始的\(n_1\)和询问次数\(q\),设每一次的答案\(a_i= ...
- 末日余晖 PC 版 下载
末日余晖 PC 版 下载 <末日余晖>(英文名:Farlight 84)一款废土题材的射击游戏 Farlight 84 Official Trailer Farlight 84 官方预告片 ...
- js Array.from & Array.of All In One
js Array.from & Array.of All In One 数组生成器 Array.from The Array.from() static method creates a ne ...