最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 小技巧系列 查看内容

微信小程序小技巧:文字单行背景自适应带角标

天下雪 2016-12-5 10:42

本文原作者:柠檬不萌,来自原文地址请按 效果 - 代码 - 错误思路 - 正确思路 - 知识点的顺序观看~三口艾瑞八嘚~效果话不多说先看图吧您吶,PS只看”wechat“?#36335;?#37027;一点~想做小程序好久了,这周终于有时间搞一下 ...

本文原作者:柠檬不萌,来自原文地址

请按 效果 - 代码 - 错误思路 - 正确思路 - 知识点的顺序观看~ 

三口艾瑞八嘚~

效果

话不多说先看图吧您吶,PS只看”wechat“?#36335;?#37027;一点~


想做小程序好久了,这周终于有时间搞一下~ 那么问题来了,好久没?#34892;?#32593;页了,之前的老本全还回去了 
幸好~ h5还算简单。。那就上呗,好了,不废话了。。 
代码 
home.wxml

  1. <view class="home_address">
  2. <view>
  3. <text>停靠在:{{formatted_address}}</text>
  4. <image src="{{imgUrls_address}}" />
  5. </view>
  6. </view>

home.wxss

  1. .home_address {
  2. background-color: #e0004d;
  3. text-align: center;
  4. padding: 10rpx;
  5. }
  6. .home_address view {
  7. padding-right: 30rpx;
  8. padding-left: 30rpx;
  9. padding-top: 10rpx;
  10. padding-bottom: 10rpx;
  11. white-space: nowrap;
  12. }
  13. .home_address view text {
  14. color: white;
  15. font-size: 14px;
  16. padding-right: 40rpx;
  17. padding-top: 10rpx;
  18. padding-bottom: 10rpx;
  19. padding-left: 20rpx;
  20. white-space: nowrap;
  21. border-radius: 30rpx;
  22. background-color: #a00c3d;
  23. }
  24. .home_address image {
  25. width: 14rpx;
  26. height: 9rpx;
  27. padding: 8rpx;
  28. margin-left: -40rpx;
  29. }

home.js

  1. Page({
  2. data: {
  3. formatted_address: '朝阳大悦城',//停靠地址
  4. },

代码看完了,那么我们来看看思路 
错误思路 
错误思路1:view1背景 - view2背景 - text - image 
效果:view2背景永远都是全屏啊有木有,完全自适应啊有木有,设置view宽度不管用啊有木有, 
如果你想想不粗来,look this

错误思路1:view1背景 - view2 - text背景 - image 
好办啊,你给文字上背景不就OK了。。 
Are you kidding me?

【我刚刚想到一个思路,但是没有试呢 
酱婶儿 
文字设置左侧圆角,右侧直角,的背景 
图片设置左侧圆角,右侧直角,的背景 
?#34892;?#36259;可以试试(内心OS:好low啊~。。其实我接下来的做法也挺low,捂脸。。。)】 
正确思路 
view1背景 - view2单行 - text背景单行右距离 - image负左距离 
代码参考上面代码 
bingo~ 比零比零的正确效果新鲜出炉

长度随便变~你开心就好,哈哈

tip 
text一定要用padding,image一定要用margin 
单行一定是:white-space:nowrap 
view居中:

  1. text-align:center;
  2. margin-left:auto;
  3. margin-right:auto;
  4. or
  5. text-align:center;
  6. margin:0 auto;

字体w3:http://www.w3school.com.cn/css/css_font.asp 
可?#22278;?#29992; 标签 <view></view> 将text组件包裹起来,作为父标签,就可以作为新的一行 
或者采用 设置class 属性 加上 display: block;

自体换行:1 <view></view> 将text组件包裹起来 
2 设置class 属性 - display: block; 
动态字体:<text>{{text}}</text> text在js - data 
字体?#24405;簐iew - bindtap ,对应的 .js 文件?#34892;?#20989;数

  1. <view bindtap="func">
  2. <text>{{text}}</text>
  3. </view>

.js:func: function() { this.setData({ text:"更改文字"}, 
说不定需求过?#25945;煊直?#20102;,万?#35805;?#25105;这个?#21015;?#33510;苦写的样式删掉,岂不是6?#36335;?#38634;~ 
原谅我,我h5+css+js 都忘的一干二净~~ 
各位仙人各位大神,看我代码有什么毛病赶紧帮我指出来啊,或者命名规范啊,写的有什么不对的 
有多少告诉我多少,不胜感激~~~嘤嘤嘤~~

鲜花
鲜花 (3)
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (4 人)

分享至 : QQ空间
收藏
原作者: 柠檬不萌 来自: 原文地址

相关阅读

  • 开发工具 2018-9-29 15:54
    《微信小程序自动切片生成布局软件》原来?#20013;?#30340;这部分工作,可以用切片软件的方法来?#23567;?#20999;好后,可以自动生成wxml,wcss,js文件。
    效果图?#31995;?#25991;字可以通过自动文字识别识别出来,提高录入的速度,减轻工作量。
    设计好的切片文件可以存档,以便下次需要的时候拿来重新编辑。只要有切片文件在,换了程序也可以修改和编辑。
    有任?#25105;?#38382;欢迎随时联系我们!
    Q  Q : 348961183
    如有打扰,请谅解!
    勿喷!谢谢!
  • 旭日东升 2017-7-17 09:43
    是?#27426;?#30340;哈哈
新时时彩软件
江苏快3开奖结果 隐密境界的突袭电子 桑普多利亚对ac米兰现场直播 彩票走势图 深圳天天爱棋牌 广东快乐十分计划预测 莱加内斯一皇马 跑跑卡丁车手游4月15日 台球鲨鱼APP 新11选5玩法 福彩26选5开奖结果 英雄联盟比赛