一、快手信息流广告-基础组件
1.icon
图标。组件属性的长度单位默认为px，支持rpx/px
属性
KSML：
<view class='total'>
<view class='wrap'>
<view class='title'>icon类型</view>
<view class='content'>
<view style="width: 33.33%;" class='con' ks:for='{{icon.type}}'>
<icon type='{{item}}' />
<text>{{item}}</text>
</view>
</view>
</view>
<view class='wrap'>
<view class='title'>icon大小</view>
<view class='content'>
<view style="width: 33.33%;" class='con' ks:for='{{icon.size}}'>
<icon type='success' size='{{item}}' />
<text>{{item}}</text>
</view>
</view>
</view>
<view class='wrap'>
<view class='title'>icon颜色</view>
<view class='content'>
<view style="width: 33.33%;" class='con' ks:for='{{icon.color}}'>
<icon type='success' color='{{item}}' />
<text>{{item}}</text>
</view>
</view>
</view>
</view>
JS：
Page({
onShareAppMessage() {
return {
title: 'icon',
path: 'page/component/text/index'
}
},
data: {
icon:{
type:['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'],
color:['red','yellow','blue','green','pink','orange'],
size:[20,30,40,50,60,70]
}
}
}
CSS
.title{
font-size: 18px;
}
.content{
margin-top: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: center;
}
.con{
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
2.快手广告投放-page-meta
页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的*个节点。可以配合 navigation-bar 组件一同使用。 通过这个节点可以获得类似于调用 ks.setBackgroundTextStyle ks.setBackgroundColor 等接口调用的效果。
属性
属性类型默认值必填说明background-text-stylestring否下拉背景字体、loading 图的样式，仅支持 dark 和 lightbackground-colorstring否窗口的背景色，必须为十六进制颜色值background-color-topstring否顶部窗口的背景色，必须为十六进制颜色值background-color-bottomstring否底部窗口的背景色，必须为十六进制颜色值root-background-colorstring否页面内容的背景色，用于页面中的空白部分和页面大小变化 resize 动画期间的临时空闲区域scroll-topstring否滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置scroll-durationnumber300否滚动动画时长page-stylestring否页面根节点样式page-font-sizestring否页面 page 的字体大小，可以设置为 system ，表示使用当前用户设置的微信字体大小root-font-sizestring否页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值, 也可以设置为 systempage-orientation实验性string否页面的方向，可为 auto portrait 或 landscape3.快手广告代理-progress
进度条。组件属性的长度单位 rpx/px（默认为px）
属性
属性类型默认值必填说明percentnumber否百分比0~100show-infobooleanfalse否在进度条右侧显示百分比border-radiusstring | number0否圆角大小font-sizestring | number16否右侧百分比字体大小stroke-widthstring | number6否进度条线的宽度colorstring'#09BB07'否进度条颜色（请使用activeColor）active-colorstring'#09BB07'否已选择的进度条的颜色background-colorstring'#EBEBEB'否未选择的进度条的颜色activebooleanfalse否进度条从左往右的动画active-mode'backwards' | 'forwards''backwards'否backwards: 动画从头播；forwards：动画从上次结束点接着播durationnumber30否进度增加1%所需毫秒bindactiveend实验性eventhandle否动画完成事件示例代码
kmsl：
<view class='total'>
<view class='wrap'>
<view>默认样式</view>
<progress class='top10' percent='10' />
</view>
<view class='wrap'>
<view class='dis-title'>
<view>显示百分比</view>
<view class='tit-right'>show-info</view>
</view>
<progress class='top10' show-info percent='20' />
</view>
<view class='wrap'>
<view class='dis-title'>
<view>从左往右动画</view>
<view class='tit-right'>active</view>
</view>
<progress
class='top10'
percent='{{percent}}'
active="true"
bindactiveend='activeEnd'
/>
</view>
<view class='wrap'>
<view class='dis-title'>
<view>进度条颜色</view>
<view class='tit-right'>active-color</view>
</view>
<progress class='top10' percent='50' active-color='#d9211e' />
</view>
<view class='wrap'>
<view class='dis-title'>
<view>进度条宽度</view>
<view class='tit-right'>stroke-width</view>
</view>
<progress class='top10' percent='70' stroke-width='11' />
</view>
<view class='wrap'>
<view class='dis-title'>
<view>圆角大小</view>
<view class='tit-right'>border-radius</view>
</view>
<progress class='top10' percent='85' border-radius='10px' />
</view>
</view>
JS：Page({
onShareAppMessage(){
return {
title: 'progress',
path: 'page/component/progress/index'
}
},
data: {
percent: 0,
},
onShow() {
setTimeout(() => {
this.setData({
percent: 100
})
},0);
},
activeEnd(e){
console.log('动画完成',e)
},
})
现在很多人都想要在快手上投放广告，来对自己的产品获取一个曝光，来引流，所以需要我们找到一家代理商来做快手的广告，快手推广现在代理商很多，选择对了也很关键！长春小象网络营销代运营是全国快手广告的渠道商,从事快手广告投放已经多年,拥有*的快手短视频广告运营能力！广告咨询电话：158-0194-4939
本文标题：快手广告投放-快手小程序（开发-组件）01
本文链接：https://www.eatui.cn/xinxiliu/17612.html
