0、撩课的API地址
url: ‘http://demo.itlike.com/web/xlmc/api/homeApi’
wx.request({
url: 'http://demo.itlike.com/web/xlmc/api/homeApi',
data:{
'itlike':"57355341358679733729"
},
method:'get',
success:(res)=>{
console.log('网络请求成功',res.data.data.list[3].product_list);
this.setData({
product_list:res.data.data.list[3].product_list,
})
},
fail:(err)=>{
console.log('网络请求失败',err);
}
})
1、swiper轮播图
<!--pages/swiper/swiper.wxml-->
<swiper class="myswiper" indicator-dots
indicator-color="white"
indicator-active-color="tomato"
autoplay iterval="2000" circular vertical
>
<swiper-item>
<image class="myimage" src="/asset/images/gril02.jpg" bindtap="jump"/>
</swiper-item>
<swiper-item>
<image class="myimage" src="/asset/images/gril03.jpg"/>
</swiper-item>
<swiper-item>
<image class="myimage" src="/asset/images/gril04.jpg"/>
</swiper-item>
</swiper>
js
jump(){
console.log("hello world");
wx.navigateTo({
url: '/pages/mylogin/mylogin',//不需要后缀名
})
},
2、options接受链接传来的参数
上例起始页面js
jump(){
console.log("hello world");
wx.navigateTo({
url: '/pages/mylogin/mylogin?id=6&name=zhangsan',//后面跟着两个参数
})
},
被跳转页面的onload函数里面通过options来接受传来的参数
onl oad: function (options) {
console.log(options.id ,options.name)
},
3、moveable-area
wxml
<movable-area class="moare">
<movable-view class="mv" direction="all" inertia friction="5">
这里是可移动视图
</movable-view>
</movable-area>
wxss
.moare{
width: 400rpx; height: 400rpx; background-color:orange
}
.mv{width: 130rpx; height: 100rpx; background-color:red}
4、moveable-area滑动区域演示滑动删除案例
wxml
<!--pages/movable/movable.wxml-->
<view class="cell">
<movable-area class="movearea">
<movable-view class="mv" direction="horizontal" x="{{isopen ? '-100rpx': '0'}}"
bindtouchstart="handle_start" bindtouchend="handle_end">这是一个cell</movable-view>
</movable-area>
<button type="warn" class="delbtn" >删除</button>
</view>
wxss
.cell{ height: 100rpx; margin-top: 50rpx;display: flex;
}
.delbtn{ width: 100rpx !important; font-size:22rpx;
line-height: 100rpx; padding: 0 !important;}
.movearea{ flex: 1; height: 100%;}
.mv{ width: 100vw; background-color: orangered; height: 100%;
z-index: 99;}
js
// pages/movable/movable.js
let lastTouchX=0;
Page({
data: {
isopen:false,
},
handle_start(event){
lastTouchX=event.changedTouches[0].pageX
},
handle_end(event){
let newTouchX=event.changedTouches[0].pageX;
let cha=newTouchX-lastTouchX;
if(cha <-20){
this.setData({
isopen:true,
})
}else if(cha >20){
this.setData({
isopen:false,
})
}else{
this.setData({
isopen:this.data.isopen,
})
}
},
})
5、srcoll-view
wxml
<!--pages/scrollview/scrollview.wxml-->
<scroll-view class="sv"
scroll-x scroll-y scroll-top="100px" scroll-left="100px"
>
<image src="/asset/images/gril09.jpg"/>
</scroll-view>
wxss
/* pages/scrollview/scrollview.wxss */
.sv{
width: 200rpx; height: 400rpx; background-color: orangered;
}
.sv image{
width:750rpx !important; height: 900rpx !important;
}
6、组件的外部样式类
- 1、在组件上添加外部样式类对象
组件js
Component({
externalClasses:["segment-cls"],//对象指用作父组件的样式属性名
})
- 2、父组件上使用
<x-segmentPane segmentItems="{{items}}" segment-cls="xs"></x-segmentPane>
7、自定义组件案例
太复杂了,直接上源码吧
点击下载源码
8、小程序的相关对象
APP对象
page对象
component对象