小程序类似糗事百科一样左右滑的效果，每个页面有下拉加载

其他 2018-10-30 23:41:32 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34672907/article/details/78815138

由于开发需要一开始加载一个页面，左滑出现一个页面右滑出现另一个页面的功能，一开始选择的是监听左滑调一个页面，右滑调一个页面。但是效果不好，因为小程序默认页面出来是从右边向左边出，所以右滑理应是右边出来的页面却从左边出来了。最后的解决方案是用小程序自带的swiper实现整个效果。由于除了首页，其他的页面都需要下拉加载，至于下拉加载部分，各位可以看我写的下拉加载部分的代码哦。

<view class="scrollers">

    <swiper class="swiper" current="{{currentTopItem}}" bindchange="bindChange" duration="300" style="height:{{swiperHeight}}px">
        <!--全部-->
        <swiper-item>
            <view class="top-tab tab-bg">
                <view class="showprev">
                    <image class="findmenuimg" src="../img/find/find_menu.png" bindtap="xxx"></image>
                </view>
                <view class="showtitle shan">发现</view>
                <view class="shownext">
                    <image class="show_leftright_img" src="../img/index/next.png" bindtap="tohomepage"></image>
                </view>
            </view>
            <scroll-view class="scrollView shanscroller" lower-threshold="50" bindscrolltolower="myscrollertolower" style="height:{{scrollHeight}}px;" scroll-y>
                <view class='line-break'></view>
                <view class="find">
                    <!-- 展示头像及感受 -->
                    <view class='show_public_and_feel'>
                        <!-- 头像及发表时间部分 -->
                        <view class='clientimg_name_time'>
                            <view class='showheader_img'>
                                <image src='../img/test/header.png' mode='scaleToFill'></image>
                            </view>
                            <view class='show_name'>xxx</view>
                            <view class='show_time'>
                                <image src='../img/find/publish_time.png'></image>1小时10分钟前
                            </view>
                        </view>
                        <!-- 展示感受部分 -->
                        <view class='show_feel'>
                            <view class='show_feel_content'>
                                <text>今天这里太舒服了，人好少，刚刚开始享受</text>
                            </view>
                        </view>
                    </view>
                    <!-- 展示分享出来的图片 -->
                    <view class='showfeel_img'>
                        <view class='show_more_three_img'>
                            <view class='showfeel_left_img'>
                                <image src='../img/test/img3.png'  mode='aspectFill'></image>
                            </view>
                            <view class='showfeel_right_img'>
                                <view class='showfeel_right_top'>
                                    <image src='../img/test/img2.png'  mode='aspectFill'></image>
                                </view>
                                <view class='showfeel_right_top'>
                                    <view class='show_img_number shan'>+3</view>
                                    <image src='../img/test/img1.png'  mode='aspectFill'></image>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 展示点赞及评论 -->
                    <view class='thumb_up_and_comment'>
                        <!-- 展示点赞 -->
                        <view class='thumb_up'>
                            <image src='../img/find/liking.png'></image>34
                        </view>
                        <!-- 展示评论 -->
                        <view class='comment'>
                            <image src='../img/find/comment.png'></image>21
                        </view>
                    </view>
                </view>
            </scroll-view>
        </swiper-item>
        <swiper-item>
            <!-- 头部展示名称及图标显示左右 -->
            <view class="top-tab">
                <view class="showprev">
                    <image class="show_leftright_img" src="../img/index/perv.png" bindtap="toprev"></image>
                </view>
                <view class="showtitle shan">书吧</view>
                <view class="shownext">
                    <image class="show_leftright_img" src="../img/index/next.png" bindtap="tonext"></image>
                </view>
            </view>
            <view class="showcontentmenu">
                <view class="show_menu" style="{{translate}}" catchtap="touchnone" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove" bindtouchend="mytouchend">
                    <!-- 显示运营上的图片 -->
                    <view class="show_img imgafter">
                        <image class="showbanner" mode="scaleToFill" src="../img/index/banner.png"></image>
                    </view>
                    <view class="menu">
                        <!-- 显示可以滚动的部分 -->
                        <scroll-view scroll-y catchscroll="scrollertoper" class="scroller">
                            <view class=" scan border {{index == toView? 'show_active':''}} " wx:for="{{dataList}}" wx:key="{{index}}" data-testIndex="{{index}}" catchtap="showclass">
                                <image class="show_menu_icon" src="{{item.src}}"></image>{{item.title}}</view>
                        </scroll-view>
                    </view>
                </view>
            </view>
            <!-- 展示签到 -->
            <button class="show_sign_in">扫码</button>
        </swiper-item>
        <swiper-item>
            <view class="top-tab tab-bg">
                <view class="showprev">
                    <image class="show_leftright_img" src="../img/index/perv.png" bindtap="tohomepage"></image>
                </view>
                <view class="showtitle shan">吃喝玩乐</view>
                <view class="shownext">
                    <image class="psetting" src="../img/personal_center/setting.png" bindtap="toset"></image>
                </view>
            </view>
            <scroll-view class="scrollView" scroll-y="true" bindscrolltolower="loadMoreData">
               
            </scroll-view>
        </swiper-item>
    </swiper>
</view>

css部分 

/* 最大的page设置 */

page {
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-family: "微软雅黑";
    overflow: hidden;
}

/* 展示滑动模块 */

.swiper {
    width: 100%;
    height: 100%;
    background: #b2b2b2;
    overflow-x: hidden;
}

/* 滑动区域 */

.scrollers, .scrollView {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* 滑动区域颜色 */

.scrollView {
    background: #ddd;
}

/* 最上面的tab */

.top-tab {
    width: 100%;
    height: 80rpx;
    background: #b4b4b4;
    overflow: hidden;
}
.tab-bg{
  background: #dedede;
}

/* 左边箭头 */

.showprev {
    width: 20%;
    height: 100%;
    float: left;
    text-align: center;
}

/* 右边箭头 */

.shownext {
    width: 19%;
    height: 100%;
    float: left;
    text-align: center;
}

/* 发现左边图片 */

.findmenuimg {
    width: 43rpx;
    height: 30rpx;
    padding-top: 17rpx;
}

/* 个人资料右边 */

.psetting {
    width: 45rpx;
    height: 38rpx;
    padding-top: 19rpx;
}

/* 展示头部名称 */

.showtitle {
    width: 60%;
    height: 100%;
    float: left;
    font-size: 26rpx;
    text-align: center;
}

/* 箭头的设置 */

.show_leftright_img {
    width: 22rpx;
    height: 40rpx;
    padding-top: 17rpx;
    vertical-align: middle;
}

/* 文字居中 */

.shan:after {
    display: inline-block;
    width: 0;
    height: 100%;
    content: "";
    vertical-align: middle;
}

/* 展示包裹菜单的最大的div */

.showcontentmenu {
    width: 100%;
    height: 80%;
    position: relative;
    top: 0;
    overflow: hidden;
}

/* 展示主菜单 */

.show_menu {
    height: 100%;
    width: 100%;
    margin-top: 5%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* 展示图片区域 */

.show_img {
    width: 76.2%;
    margin-left: 12.3%;
    height: 48%;
    text-align: center;
    background: #fff;
    color: #ccc;
}

.showbanner {
    width: 100%;
    height: 100%;
    display: block;
}

.show_menu_icon {
    width: 36rpx;
    height: 48rpx;
    vertical-align: middle;
    margin-right: 50rpx;
    margin-left: 63rpx;
}

/* 展示下面的菜单 */

.menu {
    width: 100%;
    height: 51%;
}

/* 菜单可滚动 */

.scroller {
    width: 90%;
    height: 100%;
    margin-left: 5%;
    padding-bottom: 1%;
}

/* 展示菜单下的div */

.scan {
    width: 84.3%;
    height: 30%;
    background: #fff;
    margin-left: 8.2%;
    text-align: left;
    /* padding-left: 5%; */
    color: #b7b7b7;
}

/* 展示有border的 */

.border {
    border-bottom: 1rpx solid #ccc;
}

.show_sign_in {
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    position: absolute;
    bottom: 0;
    border-radius: 0;
    background: -moz-linear-gradient(left, #deffca, #a3f8ff); /*Mozilla*/
    background: -webkit-gradient(linear, 0 50%, 100% 50%, from(#deffca), to(#a3f8ff)); /*Old gradient for webkit*/
    background: -webkit-linear-gradient(left, #deffca, #a3f8ff); /*new gradient for Webkit*/
    background: -o-linear-gradient(left, #deffca, #a3f8ff); /*Opera11*/
}

/* 将文字居中 */

.scan:after, .imgafter:after {
    width: 0%;
    height: 100%;
    vertical-align: middle;
    display: inline-block;
    content: "";
}

/* 去掉默认有的滚动条 */

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

/* 展示当前活动的区域 */

.show_active {
    /* transform: scale(1.15, 1.15); */
    position: relative;
    width: 100%;
    height: 33%;
    margin-left: 0%;
    -webkit-box-shadow: 0 0 14px #ebebeb;
    -moz-box-shadow: 0 0 14px #ebebeb;
    box-shadow: 0px 0px 14px #ebebeb;
    color: #b7b7b7;
    font-size: 16px;
    border: none;
}

/* 展示发现第一个div离内容多远 */

.line-break {
    width: 100%;
    height: 6%;
}

/* 发现中最大div的设置 */

.find {
    width: 88%;
    margin-left: 7%;
    margin-bottom: 2%;
       /* border: 1px solid red;    */
}

/* 展示头像及看书感触 */

.show_public_and_feel {
    width: 88%;
    height: 280rpx;
    overflow: hidden;
    background: #fff;
    margin-left: 6%;
    box-shadow: 40rpx 0rpx 40rpx #c2c2c2;
    /* border: 1px saddlebrown solid; */
}

/* 展示发表人的头像和发表时间 */

.clientimg_name_time {
    width: 100%;
    height: 100rpx;
}

/* 展示头像大小 */

.showheader_img {
    width: 100rpx;
    height: 100rpx;
    float: left;
    box-shadow: 1rpx 10rpx 40rpx #c2c2c2;
}

.showheader_img>image {
    width: 100%;
    height: 100%;
}

/* 展示名字 */

.show_name {
    width: 40%;
    height: 100%;
    float: left;
    text-align: left;
    line-height: 100rpx;
    padding-left: 4%;
}

/* 展示发表时间 */

.show_time {
    width: 37%;
    height: 100%;
    line-height: 100rpx;
    float: left;
    font-size: 24rpx;
    color: #b8b8b8;
    overflow: hidden;
}

/* 发表时间的钟图片 */

.show_time>image {
    width: 27rpx;
    height: 27rpx;
    margin-top: -2rpx;
    vertical-align: middle;
    margin-right: 6%;
}

/* 展示感受区域 */

.show_feel {
    width: 100%;
    height: 180rpx;
    position: relative;
    overflow: hidden;
}

/* 展示感受里面的内容，并且居中 */

.show_feel_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 90rpx;
    width: 60%;
    font-size: 28rpx;
    line-height: 45rpx;
    font-family: "微软雅黑";
    display: -webkit-box;
    display: -moz-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* 展示图片的最大的view */
.showfeel_img{
  width: 96%;
  height: 500rpx;
  margin-left: 2%; 
  box-shadow: 30rpx 40rpx 60rpx #c2c2c2;
  position: relative;
  z-index: 2;
}
/* 展示多于三张图的view */
.show_more_three_img,.show_two_img,.show_one_img{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 展示多于三张图的view的左边放比较大的图片的view */
.showfeel_left_img{
  width: 60%;
  height: 100%;
  float: left;
}
.showfeel_left_img>image{
  width: 100%;
  height: 100%;
}
/* 多于三张图的view右边展示两张小的图片 */
.showfeel_right_img{
  width: 40%;
  height: 100%;
  float: left;
}
/* 展示多于三张图的view右边上下两张图片 */
.showfeel_right_top{
  width: 100%;
  height: 50%;
}
/* 右边的图片大小 */
.showfeel_right_top>image{
  width: 100%;
  height: 100%;
}
/* 展示两张图片的排版 */
.show_two_img>view{
  height: 100%;
  float: left;
}
.showtwo_left_img{
  width: 60%;
}
/* 展示两张图片时左边图片设置 */
.showtwo_left_img>image{
  width: 100%;
  height: 100%;
}
/* 展示展示两张图片时右边的view最大的设置 */
.howtwo_right_img{
  position: relative;
  width: 40%;
}
.show_img_number{
  position: absolute;
  width: 40%;
  height: 50%;
  z-index: 3;
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;

}
/* 展示展示两张图片时右边居中设置 */
.howtwo_right_img>view{
  width: 100%;
  height: 100%;
}
/* 展示展示两张图片时右边居中image */
.howtwo_right_img>view image{
  width: 100%;
  height: 100%;
}
/* 展示一张图片的设置 */
.show_one_img>image{
  width: 100%;
  height: 100%;
}
/* 展示点赞及评论最大的view */
.thumb_up_and_comment{
  width: 88%;
  height: 160rpx;
  margin-left: 6%;
  background: #fff;
  margin-bottom: 60rpx;
  box-shadow:20rpx 20rpx 60rpx #c2c2c2;
}
/* 展示点赞数 */
.thumb_up,.comment{
  width: 50%;
  height: 100%;
  float: left;
  text-align: center;
  line-height: 160rpx;
  color: #c4c4c4;
  /* border-right: 1px saddlebrown solid; */
}
.thumb_up>image,.comment>image{
  width: 40rpx;
  height: 40rpx;
  vertical-align: middle;
  margin-right: 20rpx;
}
js部分 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    un_name: "Jonny\nLee",
    contents: "今天这里太舒服了，人好少\n刚刚开始看《黄金时代》",
    topTabItems: ["发现", "首页", "中心"],
    currentTopItem: 1,
    allDataList: ["1", "2", "3", "4"],
    scrollerBottom: 0,//用于判断是否,
    startPoint: [0, 0],//判断左滑还是右滑
    shanshan: 0,//用于判断是否
    translate: "",//用于滑动的时候的效果
    toView: 1,//用于判断哪个类有突出效果
    scrollHeight: 0,
    dataList: [{ title: "预约", src: "../img/index/book.png" }, { title: "点餐", src: "../img/index/dinner.png" }, { title: "电子检索", src: "../img/index/elesearch.png" }],
    shanDataList: [{ "title": "我是珊珊。我想看看是不是出错了" }, { "title": "我是文哥。我想看看是不是出错了" }, { "title": "我是欧少。我想看看是不是出错了" }, { "title": "我是小熊。我想看看是不是出错了" }],
   navigatorList: ["../find/find", "../logs/logs", "../personal_center/personal_center"]
  },
  switchTab: function (e) {
    this.setData({ currentTopItem: e.currentTarget.dataset.idx })
  },
  // 首页点击左边箭头
  toprev:function(){
    this.setData({ currentTopItem: 0 })
  },
  // 首页右边箭头
  tonext:function(){
    this.setData({ currentTopItem: 2 })
  },
  // 发现页的右边箭头
  tohomepage:function(){
    this.setData({ currentTopItem: 1 })
  },
  // 个人资料的右边箭头
  toset: function () {
    wx.navigateTo({
      url: '../set/set',
    })
  },
  bindChange: function (e) {
    this.setData({ currentTopItem: e.detail.current })
    this.getdata();
  },
  getdata: function () {
    var thisindex = this.data.currentTopItem;
    if (thisindex == 0) {
      console.log("xxxxxxxxx");
      this.setData({ shanDataList: [{ "title": "我是珊珊。我想看看是不是出错了" }, { "title": "我是文哥。我想看看是不是出错了" }, { "title": "我是欧少。我想看看是不是出错了" }, { "title": "我是小熊。我想看看是不是出错了" }] });

    } else if (thisindex == 1) {
      this.setData({ shanDataList: "" });
      console.log("sssssssss")
    } else if (thisindex == 2) {
      this.setData({ shanDataList: [{ "title": "我是珊珊。我想看看是不是出错了" }, { "title": "我是文哥。我想看看是不是出错了" }, { "title": "我是欧少。我想看看是不是出错了" }, { "title": "我是小熊。我想看看是不是出错了" }] });
      console.log("aaaaaaaaa")
    }
  },
  //鼠标按下
  mytouchstart: function (e) {
    this.setData({ startPoint: [e.touches[0].pageX, e.touches[0].pageY] });
  },
  //鼠标移动
  mytouchmove: function (e) {
   
  },
  //鼠标离开事件
  mytouchend: function (e) {
    
  },
  // 滑动区域的滑动效果
  scrollertoper: function (e) {
    this.setData({ shanshan: 0 });
    var top = e.detail.scrollTop;
    var nowView = this.data.toView
    if (e.detail.deltaY < 0) {
      if ((top / 40) > nowView) {
        this.setData({ toView: nowView + 1 });
      }
    } else {
      if ((top / 40) < nowView && top > 40) {
        this.setData({ toView: nowView - 1 });
      }
    }
    this.setData({ shanshan: 0 });
  },
  touchnone: function (e) {
    this.setData({ shanshan: 0 });
  },
  // 点击每一个的时候把当前类给他
  showclass: function (e) {
    // var clickIndex = e.currentTarget.dataset.testindex;
    // console.log(this.data.navigatorList[clickIndex]);
    // this.setData({ toView: clickIndex });
    // wx.navigateTo({
    //   url: this.data.navigatorList[clickIndex],
    // })
  },
  myscrollertolower: function (e) {
   
    this.setData({ scrollerBottom: this.data.scrollerBottom + 1 });
    this.setData({ shanDataList: this.data.shanDataList.concat(this.data.shanList) });
   
  },
  loadMoreData: function (e) {
 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getdata();
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
  },
})
呼，一口气粘贴复制完这么多，累得不行啊。希望对你有用咯。没有用也不要打我咯

猜你喜欢

转载自blog.csdn.net/qq_34672907/article/details/78815138
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
周排行
《Python 编程-从入门到实践》11-1~11-3
关于Numpy+TensorFlow+PyTorch构造NN的总结
【原创达人】制作WINPE启动盘心得
英文图片文字识别（提取）
2022cma看片网站给一个你懂的
二叉搜索树的实现（BST）（插入+删除+查找+各种遍历+高度）
搬家通知博文地址(将博客搬到CSDN)
asfd
解决错误：MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk
如何注册微信个人小程序
每日归档
更多
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022