请按 效果 - 代码 - 错误思路 - 正确思路 - 知识点的顺序观看～
三口艾瑞八嘚～
效果
话不多说先看图吧您吶，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;ortext-align:center;margin:0 auto;
字体w3:
可以采用 标签 <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 都忘的一干二净~~
各位仙人各位大神，看我代码有什么毛病赶紧帮我指出来啊，或者命名规范啊，写的有什么不对的
有多少告诉我多少，不胜感激～～～嘤嘤嘤～～
收藏