小程序看练代码03完结--撩课api地址，swiper，options， movable-area,scroll-view,组件的外部样式类，自定义组件案例

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对象

标签：看练,isopen,自定义,height,width,组件,data,options
来源： https://blog.csdn.net/weixin_43745804/article/details/113824158