<view class='box'>
<view class='title'>滑动条和颜色</view>
<text>红色滑动条</text>
<slider data-color="r" value='{{r}}'max='255' block-color='red' show-value="true" bindchanging='colorchanging'></slider>
<text>绿色滑动条</text>
<slider data-color="g" value='{{g}}'max='255' block-color='green' show-value="true" bindchanging='colorchanging'></slider>
<text>蓝色滑动条</text>
<slider data-color="b" value='{{b}}'max='255' block-color='blue' show-value="true" bindchanging='colorchanging'></slider>
<text>透明度滑动条</text>
<slider data-color="a" value='{{a}}'max='1' step='0.01' block-color='purple' show-value="true" bindchanging='colorchanging'></slider>
<view class='colorarea' style='background-color: rgba({{r}},{{g}},{{b}},{{a}});'></view>
</view>
-----------------------------------------------------------------
Page({
data:{
r:50,
g:100,
b:150,
a:1
},
colorchanging(e){
let color=e.currentTarget.dataset.color
let value=e.detail.value;
console.log(color,value)
this.setData({
[color]:value
})
}
})
-----------------------------------------------------------------------------------
<view class='box'>
<view class='title'>Swiper and Switch</view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="index">
<swiper-item>
<view class="{{item}}"></view>
</swiper-item>
</block>
</swiper>
<view class='waikuang'>
<text class='myleft'>指示器</text>
<switch checked='{{indicatorDots}}'bindchange="changeIndicatorDots"/>
</view>
<view class='waikuang'>
<text class='myleft'>自动播放</text>
<switch checked='{{autoplay}}' bindchange="changeAutopaly"/>
</view>
<view class='waikuang'>
<text class='{{myleft}}'>衔接滑动</text>
<switch checked='circular' bindchange="changeCircular"/>
</view>
<view class='waikuang'>
<text class='myleft'>竖向</text>
<switch checked='{{vertical}}' bindchange="changeVertical"/>
</view>
</view>
--------------------------------------------------------------------
Page({
data:{
background:['bc-red','bc-green','bc-blue'],
indicatorDots:true,
autoplay:false,
circular:false,
vertical:false,
interval:false,
duration:false,
},
changeIndicatorDots:function(e){
this.setData({
indicatorDots:!this.data.indicatorDots
})
},
changeAutopaly:function(e){
this.setData({
autopaly:!this.data.autopaly
})
},
changeCircular:function(e){
this.setData({
circular:!this.data.circular
})
}
,changeVertical:function(e){
this.setData({
vertical:!this.data.vertical
})
},
})
--------------------------------------------------------------------------------
<view class='box'>
<view class='title'>修改字体样式和大小</view>
<text style='font-weight:{{myBold}};font-style:{{myItalic}};text-decoration:{{myUnderline}};font-size:{{myFontSize}}'>上海大学</text>
<checkbox-group bindchange='checkboxChange'>
<checkbox value='isBold'>加粗</checkbox>
<checkbox value='isItalic'>倾斜</checkbox>
<checkbox value='isUnderline'>下划线</checkbox>
</checkbox-group>
<radio-group bindchange='radioChange'>
<radio value='15px'>15px</radio>
<radio value='25px' checked='true'>25px</radio>
<radio value='35px'>35px</radio>
</radio-group>
</view>
============================================
Page({
data:{
myFontsize:'25px'
},
checkboxChange:function(e){
var text=[];
var mybold='';
var myitalic='';
var myunderline='';
text=e.detail.value;
for(var i=0;i<text.length;i++){
if(text[i]=='isBold'){
mybold='bold';
}
if(text[i]=='isItalic'){
myitalic='italic';
}
if(text[i]=='isUnderline'){
myunderline='underline';
}
}
this.setData({
myBold:mybold,
myItalic:myitalic,
myUnderline:myunderline,
})
console.log(text[0])
},
radioChange:function(e){
this.setData({
myFontSize:e.detail.value,
})
console.log(e.detail.value)
}
})
<view class='box'>
<view class='title'>滑动条和颜色</view>
<text>红色滑动条</text>
<slider data-color="r" value='{{r}}'max='255' block-color='red' show-value="true" bindchanging='colorchanging'></slider>
<text>绿色滑动条</text>
<slider data-color="g" value='{{g}}'max='255' block-color='green' show-value="true" bindchanging='colorchanging'></slider>
<text>蓝色滑动条</text>
<slider data-color="b" value='{{b}}'max='255' block-color='blue' show-value="true" bindchanging='colorchanging'></slider>
<text>透明度滑动条</text>
<slider data-color="a" value='{{a}}'max='1' step='0.01' block-color='purple' show-value="true" bindchanging='colorchanging'></slider>
<view class='colorarea' style='background-color: rgba({{r}},{{g}},{{b}},{{a}});'></view>
</view>
Page({
data:{
r:50,
g:100,
b:150,
a:1
},
colorchanging(e){
let color=e.currentTarget.dataset.color
let value=e.detail.value;
console.log(color,value)
this.setData({
[color]:value
})
}
})
<view class='box'>
<view class='title'>Swiper and Switch</view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="index">
<swiper-item>
<view class="{{item}}"></view>
</swiper-item>
</block>
</swiper>
<view class='waikuang'>
<text class='myleft'>指示器</text>
<switch checked='{{indicatorDots}}'bindchange="changeIndicatorDots"/>
</view>
<view class='waikuang'>
<text class='myleft'>自动播放</text>
<switch checked='{{autoplay}}' bindchange="changeAutopaly"/>
</view>
<view class='waikuang'>
<text class='{{myleft}}'>衔接滑动</text>
<switch checked='circular' bindchange="changeCircular"/>
</view>
<view class='waikuang'>
<text class='myleft'>竖向</text>
<switch checked='{{vertical}}' bindchange="changeVertical"/>
</view>
</view>
Page({
data:{
background:['bc-red','bc-green','bc-blue'],
indicatorDots:true,
autoplay:false,
circular:false,
vertical:false,
interval:false,
duration:false,
},
changeIndicatorDots:function(e){
this.setData({
indicatorDots:!this.data.indicatorDots
})
},
changeAutopaly:function(e){
this.setData({
autopaly:!this.data.autopaly
})
},
changeCircular:function(e){
this.setData({
circular:!this.data.circular
})
}
,changeVertical:function(e){
this.setData({
vertical:!this.data.vertical
})
},
})
<view class='box'>
<view class='title'>修改字体样式和大小</view>
<text style='font-weight:{{myBold}};font-style:{{myItalic}};text-decoration:{{myUnderline}};font-size:{{myFontSize}}'>上海大学</text>
<checkbox-group bindchange='checkboxChange'>
<checkbox value='isBold'>加粗</checkbox>
<checkbox value='isItalic'>倾斜</checkbox>
<checkbox value='isUnderline'>下划线</checkbox>
</checkbox-group>
<radio-group bindchange='radioChange'>
<radio value='15px'>15px</radio>
<radio value='25px' checked='true'>25px</radio>
<radio value='35px'>35px</radio>
</radio-group>
</view>
============================================
Page({
data:{
myFontsize:'25px'
},
checkboxChange:function(e){
var text=[];
var mybold='';
var myitalic='';
var myunderline='';
text=e.detail.value;
for(var i=0;i<text.length;i++){
if(text[i]=='isBold'){
mybold='bold';
}
if(text[i]=='isItalic'){
myitalic='italic';
}
if(text[i]=='isUnderline'){
myunderline='underline';
}
}
this.setData({
myBold:mybold,
myItalic:myitalic,
myUnderline:myunderline,
})
console.log(text[0])
},
radioChange:function(e){
this.setData({
myFontSize:e.detail.value,
})
console.log(e.detail.value)
}
})
强力驱动