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