小程式學習之旅----基礎內容元件icon 、text 、rich-text、progress
阿新 • • 發佈:2018-11-02
Page({ data: { motto: 'Hello World', nodes: [{ name: 'h2', attrs: { class: 'h2_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'Hello World!111' }] }] , article:'<h2>我是一個內容</h2> <div>我是一個<strong>div</strong><img src="http://image08.71.net/image08/27/95/11/20/3f8e890b-2243-4054-a433-21c9621b3cb8.jpg" /></div>' } })
<icon type="warn" size="80" color="red"/> <view> 相當於div </view> <text> 相當於sapn標籤 </text> <view></view> <text selectable="true"> 相當於sapn標籤 </text> <view></view> <text decode='true'> 相當於 sapn標籤 </text> <view></view> <text decode='true'> 相當於 sapn標籤 </text> <view></view> <text decode='true' space='true'> 相當於 sapn標籤 </text> <view>建議使用全形空格 或者css實現空格</view> <text> 相當於 sapn標籤 </text> ---------------------------------------- <view>rich-text:Array </view> <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text> <view>rich-text:string </view> <rich-text nodes="{{article}}" bindtap="tap"></rich-text> <view>WxParser </view> <view> </view> <view> </view> ---------------------------------------- <progress percent="20" show-info /> <progress percent="40" stroke-width="12" /> <progress percent="60" color="pink" /> <progress percent="80" active /> <view> 111</view> <view> 11</view>
#myVideo{ width: 100%; } .controls{ height: 80rpx; line-height: 80rpx; position: absolute; bottom: 0px; background: rgba(0, 0, 0, 1); width: 100%; color: #fff; text-align: center; display:flex; } .play,.pause,.time { flex: 1; height: 100%; } .time { text-align: center; background-color: rgba(0, 0, 0, .5); color: white; height: 80rpx; line-height: 80rpx; } .img { width: 24px; height: 24px; margin: 5px auto; }