微信小程序小技巧：文字单行背景自适应带角标
请按 效果 – 代码 – 错误思路 – 正确思路 – 知识点的顺序观看～
三口艾瑞八嘚～
效果
话不多说先看图吧您吶，PS只看”wechat“下方那一点～
(此图片来源于网络，如有侵权，请联系删除! )
想做小程序好久了，这周终于有时间搞一下～ 那么问题来了，好久没有写网页了，之前的老本全还回去了
幸好～ h5还算简单。。那就上呗，好了，不废话了。。
代码
home.wxml
-
<view class="home_address"> -
<view> -
<text>停靠在：{{formatted_address}}</text> -
<image src="{{imgUrls_address}}" /> -
</view> -
</view>
home.wxss
-
.home_address { -
background-color: #e0004d; -
text-align: center; -
padding: 10rpx; -
} -
.home_address view { -
padding-right: 30rpx; -
padding-left: 30rpx; -
padding-top: 10rpx; -
padding-bottom: 10rpx; -
white-space: nowrap; -
} -
.home_address view text { -
color: white; -
font-size: 14px; -
padding-right: 40rpx; -
padding-top: 10rpx; -
padding-bottom: 10rpx; -
padding-left: 20rpx; -
white-space: nowrap; -
border-radius: 30rpx; -
background-color: #a00c3d; -
} -
.home_address image { -
width: 14rpx; -
height: 9rpx; -
padding: 8rpx; -
margin-left: -40rpx; -
}
home.js
-
Page({ -
data: { -
formatted_address: '朝阳大悦城',//停靠地址 -
},
代码看完了，那么我们来看看思路 错误思路 错误思路1：view1背景 – view2背景 – text – image 效果：view2背景永远都是全屏啊有木有，完全自适应啊有木有，设置view宽度不管用啊有木有， 如果你想想不粗来，look this
(此图片来源于网络，如有侵权，请联系删除! )
(此图片来源于网络，如有侵权，请联系删除! )
错误思路1：view1背景 – view2 – text背景 – image 好办啊，你给文字上背景不就OK了。。 Are you kidding me?
(此图片来源于网络，如有侵权，请联系删除! )
【我刚刚想到一个思路，但是没有试呢 酱婶儿 文字设置左侧圆角，右侧直角，的背景 图片设置左侧圆角，右侧直角，的背景 有兴趣可以试试（内心OS：好low啊～。。其实我接下来的做法也挺low，捂脸。。。）】 正确思路 view1背景 – view2单行 – text背景单行右距离 – image负左距离 代码参考上面代码 bingo～ 比零比零的正确效果新鲜出炉
(此图片来源于网络，如有侵权，请联系删除! )
(此图片来源于网络，如有侵权，请联系删除! )
长度随便变～你开心就好，哈哈
tip text一定要用padding，image一定要用margin 单行一定是：white-space:nowrap view居中：
-
text-align:center; -
margin-left:auto; -
margin-right:auto; -
or -
text-align:center; -
margin:0 auto;
字体w3:http://www.w3school.com.cn/css/css_font.asp 可以采用 标签 <view></view> 将text组件包裹起来，作为父标签，就可以作为新的一行 或者采用 设置class 属性 加上 display: block;
自体换行：1 <view></view> 将text组件包裹起来 2 设置class 属性 – display: block; 动态字体：<text>{{text}}</text> text在js – data 字体事件：view – bindtap ，对应的 .js 文件中写函数
-
<view bindtap="func"> -
<text>{{text}}</text> -
</view>
.js：func: function() { this.setData({ text:”更改文字”}, 说不定需求过两天又变了，万一把我这个辛辛苦苦写的样式删掉，岂不是6月飞雪～ 原谅我，我h5+css+js 都忘的一干二净~~ 各位仙人各位大神，看我代码有什么毛病赶紧帮我指出来啊，或者命名规范啊，写的有什么不对的 有多少告诉我多少，不胜感激～～～嘤嘤嘤～～
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » 微信小程序小技巧：文字单行背景自适应带角标
