小程序swiper图文切换组件

版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/85608750

 

//WXML
<!-- 最外层视图 -->
<view class='component-container' hidden="{{!occup_modal}}">
  <!-- 遮罩视图容器 -->
  <mask class='mask' bind:tap="btn_close" />
  <view class="navbar_view">
    <!-- 居中视图容器 -->
    <view class='container_centter' wx:if="{{caree_id==1}}">
      <view class='caree_view'>
        <swiper class='swiper' autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" current="{{swiper.current}}">
          <block wx:for="{{swiper.imgUrls}}" wx:key="item">
            <swiper-item catchtouchmove="stopTouchMove">
              <view class='swiper_img'>
              </view>
              <view class='craee_title_view'>
                <view class='craee_money'>
                  <view class='craee_conter'>title文本描述</view>
                </view>
                <view class='baby_add'>这里是标题</view>
                <view class='baby_list'>
                  <view class='baby_cont'>
                    <label class='list_tab' wx:for="{{list}}" wx:key="items">{{item.vigor}}</label>
                  </view>
                </view>
              </view>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <view class='submit'>
        <view class='btn_sub' bind:tap="btn_close">NICE</view>
      </view>
      <!-- 左箭头 -->
      <view class='btn_left' bindtap='btn_last'>
        左
      </view>
      <!-- 右箭头 -->
      <view class='btn_right' bindtap='btn_next'>
        右
      </view>
    </view>
  </view>
</view>

//JS
// ../components/_global/layers/family/layer-choice-occupation/layer-choice-occupation.js
/**
* > 组件名:layer-choice-occupation
* > 调用方式第一步:json配置"layer-choice-occupation":"../components/_global/layers/family/layer-choice-occupation/layer-choice-occupation"
* > 调用方式第二步:页面引入<layer-choice-occupation></layer-choice-occupation>
* > 调用方式第三步:区分显示ID
                  caree_id:function(res){}
* > 开发者:老五
* > 编辑时间:2019.1.1
*/
Component({
  properties: {
    occup_modal: {
      type: Boolean,
      value: true
    },
  },
  data: {
    caree_id: 1,
    swiper: {
      imgUrls: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546339060297&di=e24be632b2967fe00e06338b177870b8&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F28%2F7adb7f4e8f5a6aa62c9f3c4ddd950bc6.png',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546339060297&di=e24be632b2967fe00e06338b177870b8&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F28%2F7adb7f4e8f5a6aa62c9f3c4ddd950bc6.png',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546339060297&di=e24be632b2967fe00e06338b177870b8&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F28%2F7adb7f4e8f5a6aa62c9f3c4ddd950bc6.png'
      ],
      indicatorDots: true,
      autoplay: false,
      interval: 5000,
      duration: 1000,
      current: 0,
    },
  
    list: [{ vigor: "标签" }, { vigor: "标签" }],

  },
  lifetimes: {
    attached() { },
    ready() { },
    detached() { }
  },
  methods: {
    // 这里禁止手动滑动
    stopTouchMove: function () {
      return false;
    },
    // 上一个
    btn_last: function () {
      var swiper = this.data.swiper;
      var current = swiper.current;
      swiper.current = current > 0 ? current - 1 : swiper.imgUrls.length - 1;
      this.setData({
        swiper: swiper,
      })
    },
    // 下一个
    btn_next: function () {
      var swiper = this.data.swiper;
      var current = swiper.current;
      swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
      this.setData({
        swiper: swiper,
      })
    },
    // 关闭
    btn_close: function () {
      this.setData({
        occup_modal: false
      })
    },
    // 获取页面传到组件中的值
    caree_id: function (res) {

    }
  }
})

//WXSS
/* 最外层视图 */
.component-container {
  width: 100%;
  height: 100%;
  text-align: center;
}
/* 遮罩 */
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000;
  top: 0;
  left: 0;
  z-index: 9;
  opacity: 0.5;
}
.navbar_view {
  position: fixed;
  z-index: 999;
  width: 100%;
  text-align: center;
  height: 200rpx;
  line-height: 200rpx;
  top: 15%;
}
/* 居中 */
.container_centter {
  position: relative;
  display: inline-block;
  width: 90%;
  height: 900rpx;
  padding-top: 45rpx;
  border-radius: 15rpx;
  background-color: #fff;
}
.container_centters {
  position: relative;
  display: inline-block;
  width: 90%;
  height: 900rpx;
  padding-top: 45rpx;
  border-radius: 15rpx;
}
.craee_sucess {
  position: absolute;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  top: -100rpx;
}
/* 切换职业视图容器 */
.caree_view {
  position: relative;
  display: inline-block;
  width: 70%;
  height: 80%;
  background-color: #fff;
  border: 1rpx solid #ccc;
}
/* 文案视图容器 */
.craee_title_view {
  width: 100%;
  position: absolute;
  bottom: 0rpx;
  height: 300rpx;
  border-top: 1rpx solid #ccc;
}
/* 职业图片容器 */
.swiper_img {
  position: relative;
  width: 80%;
  top: 20rpx;
  display: inline-block;
  height: 300rpx;
  border: 1rpx solid #ccc;
}
/* 职业收入 */
.craee_money {
  position: relative;
  text-align: center;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  padding-top: 40rpx;
  padding-bottom: 10rpx;
  font-size: 28rpx;
}
/* 职业居中 */
.craee_conter {
  width: 85%;
  text-align: left;
  height: 50rpx;
  display: inline-block;
}
/* 宝宝属性加成 */
.baby_add {
  position: relative;
  width: 60%;
  height: 50rpx;
  border-top-right-radius: 35rpx;
  border-bottom-right-radius: 35rpx;
  background-color: #DD6666;
  color: #FFFEC7;
  line-height: 50rpx;
  font-size: 30rpx;
}
/* 宝宝属性类表 */
.baby_list {
  position: relative;
  text-align: center;
  width: 100%;
  top: 10rpx;
  height: 150rpx;
}
/* 居中 */
.baby_cont {
  position: relative;
  width: 90%;
  height: 150rpx;
  display: inline-block;
}
/* 属性 */
.list_tab {
  float: left;
  width: 28%;
  height: 40rpx;
  margin: 10rpx 10rpx;
  font-size: 28rpx;
  line-height: 40rpx;
}
/* swiper */
.swiper {
  width: 100%;
  height: 90%;
  text-align: center;
  display: inline-block;
}
/* 按钮视图 */
.submit {
  position: absolute;
  width: 100%;
  bottom: 5%;
  height: 100rpx;
  line-height: 100rpx;
}
/* 确认按钮 */
.btn_sub {
  display: inline-block;
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 35rpx;
  font-size: 30rpx;
  color: #fff;
  background-color: #FFA30B;
}
.btn_left {
  position: absolute;
  top: 45%;
  left: 0rpx;
  scrollbar-base-color: #fff;
  width: 100rpx;
  height: 100rpx;
}
.btn_right {
  position: absolute;
  top: 45%;
  right: 0rpx;
  scrollbar-base-color: #fff;
  width: 100rpx;
  height: 100rpx;
}
.left,
.right {
  width: 60rpx;
  height: 60rpx;
}

//JSON
{
  "component": true,
  "usingComponents": {}
}

//页面引入方式
//JSON

{
	"usingComponents": {
		"layer-choice-occupation":"../components/layer-choice-occupation/layer-choice-occupation"
	}
}

//index.wxml引入方式
<layer-choice-occupation modal-hidden="{{occup_modal}}"></layer-choice-occupation>