标签:小程序

小程序 滑动方式(横向、竖向)实例代码

竖向滑动:

<scroll-view scroll-y="true" style="height: 200rpx;">
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

水平滚动:

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

参考链接【脚本之家


小程序 view 左右滑动,切换 page

微信小程序开发中很多用户操作都会借鉴原生APP,众所周知原生APP中滑动切换页面,对于用户体验很好,那么使用微信小程序能不能实现呢?答案是肯定的。
首先来说说实现思路:利用touchstart、touchend事件获取用户手指滑动距离,同时监听滑动所需时间,当所需时间在一定范围内,且滑动距离够长,则算为一次成功的滑动,接下来就执行页面跳转方法。
直接上代码:

<!--index.wxml-->
<view class="class_first" bindtouchstart="touchStart" bindtouchend="touchEnd">
  滑动切换页面
</view>
//index.js
var time = 0;
var touchDot = 0;//触摸时的原点
var interval = "";
var flag_hd = true;

Page({
  onLoad: function () {
    var that = this
  },
  onShow: function(){
    flag_hd = true;    //重新进入页面之后,可以再次执行滑动切换页面代码
    clearInterval(interval); // 清除setInterval
    time = 0;
  },
  // 触摸开始事件
  touchStart: function (e) {
    touchDot = e.touches[0].pageX; // 获取触摸时的原点
    // 使用js计时器记录时间    
    interval = setInterval(function () {
      time++;
    }, 100);
  },
  // 触摸结束事件
  touchEnd: function (e) {
    var touchMove = e.changedTouches[0].pageX;
    // 向左滑动   
    if (touchMove - touchDot <= -40 && time < 10 && flag_hd == true) {
      flag_hd = false;
      //执行切换页面的方法
      console.log("向右滑动");
      wx.navigateTo({
        url: '../right/right'
      })
    }
    // 向右滑动   
    if (touchMove - touchDot >= 40 && time < 10 && flag_hd == true) {
      flag_hd = false;
      //执行切换页面的方法
      console.log("向左滑动");
      wx.navigateTo({
        url: '../left/left'
      })
    }
    clearInterval(interval); // 清除setInterval
    time = 0;
  }
})

PS:本人觉得这个控制的还不是很舒服,有待精进。
参考链接【句_号的博客


小程序图片全屏实现

因为小程序没有dom对象的,根节点是page,通过设置page{height:100%},之后在子元素中通过height:100%使元素占满屏幕的高度