微信小程序

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

三口艾瑞八嘚～

效果

话不多说先看图吧您吶，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 都忘的一干二净~~

各位仙人各位大神，看我代码有什么毛病赶紧帮我指出来啊，或者命名规范啊，写的有什么不对的

有多少告诉我多少，不胜感激～～～嘤嘤嘤～～