2018-02-14 23:54:08 soindy 阅读数 15661

微信开发工具 v1.02.1802080

swiper-item 和 scroll-view 及其中间的所有 view 都需要设置 height: 100%;

设置具体初始高度: style="height:{{winHeight}}px"

如果仍然有问题, 需要设置scroll-view的滚动方向 :

scroll-x="false" 
scroll-y="true"

示例代码:

wxml 中:

<swiper current="{{currentTab}}" 
        style="height:{{winHeight - 31}}px"  
        class="swiper-box" 
        duration="300">
  <!-- 已承担 -->
  <swiper-item class="swiper-items">
    <scroll-view scroll-x="false" scroll-y="true" class='scroll-views'>
        <block wx:for="{{items}}" wx:key="col_{{index}}"> 
          <template is="undertookCard" data="{{...item}}"/>
       </block>  
    </scroll-view>
  </swiper-item> 
</swiper>

wxss 中;

.swiper-box{ 
    display: block; 
    width: 100%; 
    height: 100%; 
    margin-top: 92rpx; 
    overflow: hidden;
}  
.swiper-items{
  height: 100%;
}
.scroll-views{
  height: 100%;
}
2018-02-27 10:36:05 u013584359 阅读数 906
swiper.wxml

<view class="page-section page-section-spacing swiper">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}" wx:key="*this">
            <swiper-item>
                <image src="{{item}}" class="slide-image" width="" height="150"/>
            </swiper-item>
        </block>
    </swiper>
</view>

swiper.js
Page({
  data: {
    imgUrls: [
              'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 
              'http://www.junfawl.cn/skin/images/5780c309432c5.jpg', 
              'http://www.junfawl.cn/uploads/allimg/171019/1-1G019214Q63W.jpg'
              ],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})


2018-09-23 18:09:55 findhappy117 阅读数 1128

代码地址如下:
http://www.demodashi.com/demo/14010.html

一、前期准备工作

软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。
  • 基于swiper组件的tab切换
2、案例目录结构

二、程序实现具体步骤

1.tab切换index.wxml代码
<view class="continer">
  <!--内容主体-->  
  <swiper class="swiper" current="1" duration="200"  bindchange="swiperChange" previous-margin="20px" next-margin="20px"  style="height: {{winHeight}}px;">  
     
        <swiper-item> 
          <view class="user-box" style="height: {{winHeight-40}}px;">
            <view class="user-image">
              <image class="image" src="https://www.geekxz.com/public/uploads/huaqu/team/logo.jpg" />
            </view> 

            <view class="user-info">
              <view class="user-job">未知</view>
              <view class="user-name">未知</view>
              <view class="user-introduce">如果你亦环抱着梦想,拥有着无限的才华,我们OkYoung 团队期待您的加入。</view>
              <view class="joinin" bindtap="joinIn">即刻创作</view>
            </view>            
          </view>
        </swiper-item> 
        <swiper-item> 
          <view class="user-box" style="height: {{winHeight-40}}px;">
            <view class="user-image">
              <image class="image" src="https://www.geekxz.com/public/uploads/huaqu/team/logo.jpg" />
            </view> 

            <view class="user-info">
              <view class="user-job">未知</view>
              <view class="user-name">未知</view>
              <view class="user-introduce">如果你亦环抱着梦想,拥有着无限的才华,我们OkYoung 团队期待您的加入。</view>
              <view class="joinin" bindtap="joinIn">即刻创作</view>
            </view>            
          </view>
        </swiper-item> 
        <swiper-item> 
          <view class="user-box" style="height: {{winHeight-40}}px;">
            <view class="user-image">
              <image class="image" src="https://www.geekxz.com/public/uploads/huaqu/team/logo.jpg" />
            </view> 

            <view class="user-info">
              <view class="user-job">未知</view>
              <view class="user-name">未知</view>
              <view class="user-introduce">如果你亦环抱着梦想,拥有着无限的才华,我们OkYoung 团队期待您的加入。</view>
              <view class="joinin" bindtap="joinIn">即刻创作</view>
            </view>            
          </view>
        </swiper-item> 
        <swiper-item> 
          <view class="user-box" style="height: {{winHeight-40}}px;">
            <view class="user-image">
              <image class="image" src="https://www.geekxz.com/public/uploads/huaqu/team/logo.jpg" />
            </view> 

            <view class="user-info">
              <view class="user-job">未知</view>
              <view class="user-name">未知</view>
              <view class="user-introduce">如果你亦环抱着梦想,拥有着无限的才华,我们OkYoung 团队期待您的加入。</view>
              <view class="joinin" bindtap="joinIn">即刻创作</view>
            </view>            
          </view>
        </swiper-item> 
  </swiper> 
</view>
2.部分index.wxss代码
page {  
  background-color: #0084ff;
}
.continer{
}
swiper-item .user-box{  
  margin-top: 3%;
  margin-left: 20rpx;
  border-radius: 20rpx;  
  border: 1rpx solid rgba(200, 200, 200, 0.1);
  box-shadow: 1px 1px 5px rgba(200, 200, 200, 0.4);
  background-color: #fff;
}
swiper-item .user-image image{
  width:350rpx;
  height:350rpx;
  border-radius: 350rpx;
  margin-top: 20%;
  border: 1rpx solid rgba(200, 200, 200, 0.4);
  box-shadow: 1px 1px 5px rgba(200, 200, 200, 0.8);
}
.user-image{
  margin: 0 25%;
}
.user-info {
  text-align: center;
  height: 240rpx;
}
.user-info view{
  text-align: center;
}
.user-info .user-name{
  margin-top: 80rpx;
  font-size: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: black;
  font-weight: 600;
}
.user-info .user-introduce{
  width: 80%;
  margin: 0 auto;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 36rpx;
  color: #5d5d5b;
}
.joinin{
  width: 30%;
  margin: 0 auto;
  height: 60rpx;
  font-size: 32rpx;
  line-height: 60rpx;
  margin-top: 170rpx;
  color: #fff;
  border-radius: 60rpx;
  background-color: #118fff;
}
3.部分index.js逻辑代码

a.滑动切换的功能实现

swichNav: function (e) {
    console.log(e);
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
      })
    }
  },

三、案例运行效果图

四、总结与备注

暂时没有微信小程序基于swiper组件的tab切换

代码地址如下:
http://www.demodashi.com/demo/14010.html

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

2019-03-12 22:45:29 HaiJun_Aion 阅读数 408

好久没更新博客了,今天遇到一个坑,坑了一下午,准备把它记录下来,以便别人也能快速的解决问题。学校项目需要小程序开发,最近把小程序看了,把官方开发指南过了一遍,看了一个黑马的小程序视频,其实我大部分都是看的黑马的视频,黑马有的视频是不错的,去年寒假的时候看了node,那位讲师是真不错啊,后续我追着看了他的讲的Vue,讲的特别细,很耐心。有想看的,下方留言。


开始入坑 Swiper

先上效果图

当初想着找一个UI框架组件实现它,找了好几个都没有。心凉凉,那么只能自己来了。

Swiper 格式

<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots>
    <swiper-item class="" item-id=""  >
          <image class="" src="" />
          <text class="" >
          </text>   
        </view>
    </swiper-item>
</swiper>

实现上面效果

JS 数据

 data: {
    dormList: [
      // 第一个swiper-item
      [{
          id: "第一个",
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 2,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 3,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 4,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
                {
          id: 2,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 3,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 4,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        }
      ],
      // 第二个swiper-item
      [{
        id: "第二个",
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 1,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 1,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        },
        {
          id: 1,
          image: "https://www.easyicon.net/api/resizeApi.php?id=1221973&size=64"
        }
      ]
    ],
  }

View 层

<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots>
  <block wx:for="{{dormList}}" wx:for-index="dormIndex" wx:for-item="swiperItem" wx:key="dormIndex">
    <swiper-item class="" item-id=""  >
      <block wx:for="{{swiperItem}}" wx:for-index="NumIndex" wx:for-item="NumList" wx:key="NumIndex">
        <view class="" hover-class="none" hover-stop-propagation="false">
          <image class="" src="{{NumList.image}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""/>
          <text class="" selectable="false" space="false" decode="false">
            {{NumList.id}}
          </text>   
        </view>
      </block>
    </swiper-item>83
  </block>
</swiper>

接着咋大白话

  • Swiper 是一个滑块视图容器,它很多属性就不在着列了。
  • swiper-item 是Swiper 的滑块,如果加入滑动内容,那么就在swiper-item中添加
  • 想实现滑动显示多页效果,那么就需要定义多维数组,如果想实现单页滑动的话,那么就定义一维数组,但是需要注意的是,如果swiper-item中内容过多时,就会超出Swiper容器的大小,部分内容就会隐藏,数据多时建议定义为二维数组。
  • 一个滑块显示多少内容根据你定义的多维数组中某个数组的数据多少显示,通过简单的布局就可实现一页显示多个内容
Swiper 容器包裹swiper-item
<swiper  style="width:200rpx ,height:900rpx" class="contaner" indicator-dots>
然后这可以控制显示多少块  swiper-item , 一般这个部位都会通过block标签来遍历,它不会占用页面位置
    <swiper-item class="" item-id=""  >
    这显示一个swiper-item要显示的内容
          <image class="" src="" />
          <text class="" >
          </text>   
        </view>
    </swiper-item>
</swiper>

通过这个坑总结:

  • 不管学哪个组件或者新东西,先弄懂其中的关系之间的联系,不要一上手就敲代码,那样只会浪费时间。
  • 知道之间的关系,然后大量例子来构建知识,知识构建例子,例子构建知识,之前看知乎一个小编说的,感觉很深奥。
2019-09-19 11:25:13 xiaxia_Lin 阅读数 1012

查看小程序官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
在这里插入图片描述
做项目时遇到一个问题:
情景:刚进入页面时显示所有服务项目,当点击一个分类时获取这个分类下的服务项目,服务项目显示在swiper组件上。
问题是:当我滑动到第2页上的时候,点击了一个分类,滑块上显示空白,原因是当前所在滑块的 index索引值上没有数据了,那么我的想法是:当我每次点击的时候直接让swiper回到第一页,就不会出现这种情况了,找了很久,才发现swiper组件本身就有current属性。所以遇到问题还是的多多看官方文档
贴上我的代码如下

 <swiper bindchange="moveServerProSwiper" current="{{swiperIndex}}" class="serviceSwiper" style="margin-top:3%;">
        <block  wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="eachItem" >
          <swiper-item class="swiper-items"  >
            <view >
           <!-- 服务项目开始 -->
            <view class="cu-list menu-avatar" wx:for="{{eachItem}}" wx:key="" >
              <view class="cu-item  itemOne" style="margin-top:-1%;">
                <view data-serviceid="{{item['ServiceId']}}" bindtap="gotoServiceProDesc" class="flex-sub margin-xs secimg" style="margin-left:3%;">
                  <image src="{{webRoot}}/static/images/index/test1.jpg"/>
                </view>
                <view class="content" data-serviceid="{{item['ServiceId']}}" bindtap="gotoServiceProDesc">
                  <view class="text-gray text-sm flex">
                    <text class="text-black itemTitle text-xl">{{item['ServiceName']}}</text>
                  </view>
                  <view class="text-gray text-sm flex">
                    <text class="text-black experice text-sm">{{item['ServiceSub']}}</text>
                  </view>
                  <view class="text-gray text-sm flex">
                    <text class="text-black textBig text-xl text-bold">¥{{item['Price_Min']}}</text><text class="text-black textBigOne text-xl">元</text><text class="text-black minute text-lg">约{{item['Duration']}}分钟</text>
                  </view>
                </view>
                <view class="action">
                  <view class="text-black text-xl"><text class="cuIcon-delete"></text></view>  
                </view>
              </view>
            </view>
              <!-- 服务项目结束 -->
           </view>
          </swiper-item>
        </block>     
</swiper>
// js服务项目的滑块 /点击事件
  changeMainCat(e) {
    var that=this;
    var seq = e.currentTarget.dataset.seq;
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 1) * 60,
      currentSelectCat: seq,
      swiperIndex:0 ///////点击的时候直接回到第一页
    })
    
    console.log(this.data.TabCur);    
    console.log(seq);
     
        
    //通过当前的大分类顺序获取对应的服务项目
    that.getFirmService();
  },
   //滑块滑动
  moveServerProSwiper:function(e){
    console.log("---")
    console.log(e)
  
    console.log(e.detail.current)
    var that=this;
    that.setData({
      swiperIndex: e.detail.current,
     
    })
    console.log("----当前滑快的位置=" + that.data.swiperIndex)
  },
没有更多推荐了,返回首页