flex
.container{
display: flex;
/* flex-direction: row; */
/* sort on left; */
/* flex-direction: row-reverse; */
/* sort on right */
/* flex-direction: column; */
/* top to down */
/* flex-direction: column-reverse; */
/* down to top*/
/* defult no wrap */
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse */
/* reverse-wrap */
/* 左对齐 */
/* justify-content: flex-start */
/* 右对齐 */
/* justify-content: flex-end; */
/* 居中对齐 */
/* justify-content:center; */
justify-content:center;
/* 成员周围包裹空白 */
/* justify-content:space-around; */
/* 成员之间留空白 */
/* justify-content:space-between; */
}
<view class="container">
<!-- hover-class触摸时改变渲染的类 -->
<!-- hover-start-time 触摸时改变的时间 -->
<view class="a size" hover-class="d" hover-start-time="3000">a</view>
</view>
swiper图标滚动播放
<!-- indicator-dots是否显示面板指示点 -->
<!-- autoplay自动播放 -->
<!-- interval自动播放时间间隔 -->
<!-- duration过度动画时长 -->
<!-- swiper-item为滚动组件的元素 -->
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<!-- slider滑动条 -->
<!-- show-value min max设置数值 -->
<!-- bindchange绑定滑动事件 -->
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/>
<slider bindchange="durationChange" show-value min="1000" max="10000"/>
js
Page({
data: {
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
}
})
scroll
<!--index.wxml-->
<!-- bindscrolltoupper当滚动到顶部时绑定一个事件 -->
<!-- bindscroll绑定滚动时的事件 -->
<!-- upper-threshold触发事件的阈值 -->
<!-- scroll-into-view滚动到指定id的view组件 -->
<!-- scroll-top设置竖直滚动条距顶部的位置 -->
<!-- scroll-left设置横向滚动条距左边的位置 -->
<!-- enable-back-to-top点击状态栏回到顶部 -->
<!-- scroll-with-animation过渡动画 -->
<scroll-view scroll-y="true" style="height:300rpx;" bindscrolltoupper="toupper" bindscrolltolower="tolower" upper-threshold ="0" lower-threshold="0" enable-back-to-top="true" scroll-with-animation="true" scroll-into-view ="c">
<view id ="a" class="a size">a</view>
<view id ="b" class="b size">b</view>
<view id ="c" class="c size">c</view>
<view id ="d" class="d size">d</view>
<view id ="e" class="e size">e</view>
</scroll-view>
<!-- 横向滚动 -->
<scroll-view class= "container" scroll-x="true" style="height:300rpx;" scroll-into-view="c">
<view id ="a" class="a size">a</view>
<view id ="b" class="b size">b</view>
<view id ="c" class="c size">c</view>
<view id ="d" class="d size">d</view>
<view id ="e" class="e size">e</view>
</scroll-view>
js
Page({
data:{
},
toupper: function(){
console.log("scroll to top");
},
tolower: function () {
console.log("scroll to fooder");
}
})
movable area
<movable-area class="father-size">
<!-- direction移动的方向 -->
<!-- out-of-bounds当滑块超出范围后是否还能移动 -->
<!-- damping移动阻尼 -->
<!-- scale双指缩放 -->
<!-- scale-min scale-max缩放的最大最小倍数 -->
<!-- disable禁用拖动 -->
<!-- bindchange绑定拖动事件 -->
<!-- bindscale绑定缩放事件 -->
<movable-view class="size" direction = "all" out-of-bounds="true" x="50" y="100" bindchange = "dochange" >
</movable-view>
</movable-area>
js
Page({
data: {
},
dochange: function(){
console.log("be moved")
}
})
icon
<icon type = "success" size="66" color="red"></icon>
<icon type = "success_no_circle" size="66"></icon>
<icon type = "info" size="66"></icon>
<icon type = "warn" size="66" ></icon>
<icon type = "waiting" size="66" ></icon>
<icon type = "cancle" size="66" ></icon>
<icon type = "download" size="66" ></icon>
<icon type = "search" size="66" ></icon>
<icon type = "clear" size="66" ></icon>
<!-- selectable文本是否可选 -->
<!-- \n \t转义 -->
<view>
<text selectable="true">this is a text \n nextline</text>
</view>
<!-- decode解码 -->
<view>
<text selectable="true" decode="true"> < > & '    </text>
</view>
<!-- <富文本> -->
<view>
<rich-text nodes ="{{mycontent}}"></rich-text>
</view>
<!-- percent 百分比 -->
<!-- show-info 显示百分比 -->
<!-- stroke-width显示进度条的宽度 -->
<!-- activeColor前景色 -->
<!-- backgroundColor背景色 -->
<!-- active填充动画 -->
<!-- active-mode动画模式, backwards从头开始 forwards从上次结束开始 -->
<progress percent="30" show-info="true" stroke-width="10" activeColor="green" backgroundColor="grey" active="true"></progress>
<progress percent="{{mypercent}}" show-info="true" stroke-width="10" active-mode="forwards" active="true"></progress>
<button bindtap = "addpercent">tap to add</button>
js
Page({
data: {
// 富文本参数数组
mycontent:[
{
name: "img",
attrs:{
class:"u-courseCardWithTime-img_img161",
src: "http://edu-image.nosdn.127.net/c3046f2a240f4d7fbc0c2582f4daa904.jpg? imageView&quality=100",
}
}
],
mypercent: 15
},
dochange: function(){
console.log("be moved")
},
addpercent: function(){
var newpercent = this.data.mypercent + 15;
this.setData({
mypercent: newpercent
})
}
})