微信小程序常用知识点总结（1）--页面刷新，本地存储，瀑布流，回到顶部，长按删除，转发分享

完整代码https://github.com/wangyaru123/delivery_record

1、页面刷新

this.onLoad();

点击返回时，要刷新页面

onShow:function(){

    this.onLoad();

  }

2、本地存储

操作	异步方法	同步方法
插入	wx.setStorage	wx.setStorageSync
读取	wx.getStorage	wx.getStorageSync
删除	wx.removeStorage	wx.removeStorageSync
清空	wx.clearStorage	wx.clearStorageSync
获取缓存信息	wx.getStorageInfo	wx.getStorageInfoSync

以Sync结尾都是同步方法。同步方法和异步方法的区别是：

• 同步方法会堵塞当前任务，直到同步方法处理返回。
• 异步方法不会堵塞当前任务。

3、瀑布流

效果图

wxml文件

<view class="free-WaterfallFlow">

      <block>

        <view class="flex-wrap" wx:for="{{images}}" wx:key='{{item.src}}'  wx:if="{{item.id%2!=''}}">

          <image mode="widthFix" src="{{item.src}}"></image>

          <view>{{item.name}}</view>

          <view>{{item.data}}</view>

        </view>

      </block>

      <block>

        <view class="flex-wrap" wx:for="{{images}}" wx:key='{{item.src}}'   wx:if="{{item.id%2==''}}">

          <image mode="widthFix" src="{{item.src}}"></image>

          <view>{{item.name}}</view>

          <view>{{item.data}}</view>

        </view>

      </block>

</view>

wxss 文件

.free-WaterfallFlow{

  margin-top: 2px;

  width:96%;

  column-count:2;/*column-count 属性规定元素应该被分隔的列数：*/

}

.free-WaterfallFlow .flex-wrap{

  background-color: white;

  display: inline-block;

  width:98%;

  margin-left:2%;

  margin-top:2%;

  border:1px solid #ccc;

  padding:2%;

  padding-top:5%;

  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);

  text-align: center;

}

.flex-wrap image{

  width:95%;

  margin:0 auto;

}

.flex-wrap view:nth-child(2){

  font-size:15px;

  padding:2% 0;

  color:#717171;

}

.flex-wrap view:nth-child(3){

  font-size:13px;

  padding:2% 0;

  color:#aaa;

  text-align: right;

}

js文件

images:[

      {

        id:'1',

        src:'../../images/pubuliu/01.jpg',

        name:'照片01',

        data:'2017/11/1'

      }, {

        id: '2',

        src: '../../images/pubuliu/02.jpg',

        name: '照片02',

        data: '2017/11/2'

      }, {

        id: '3',

        src: '../../images/pubuliu/03.jpg',

        name: '照片03',

        data: '2017/11/3'

      }, {

        id: '4',

        src: '../../images/pubuliu/04.jpg',

        name: '照片04',

        data: '2017/11/4'

      }

    ]

 

4、回到顶部

图片

注意：要设置scroll-view的高度为固定高度。

wxml文件

<scroll-view scroll-top='{{topNum}}' scroll-y="true" bindscroll="scrolltoupper">

<!-- 内容 -->

</scroll-view>

<image src='../../image/totop.png' class='top' hidden='{{!floorstatus}}' bindtap="returnTop"></image>

wxss文件

page{

  background-color: lightcyan;

  width:100%;

  height:100%;

}

scroll-view{

  width:100%;

  height:100%;

}

.top{

  position: fixed;

  bottom: 12px;

  right: 12px;

  background-color: #fff;

  color: #000;

  border-radius: 20px;

  width: 40px;

  height: 40px;

  line-height: 36px;

  font-size: 32px;

  z-index: 500;

  text-align: center;

}

js文件

scrolltoupper: function (e) {

    if (e.detail.scrollTop > 50) {

      this.setData({

        floorstatus: true

      });

    } else {

      this.setData({

        floorstatus: false

      });

    }

  }

5、长按删除

思路：对每个item，绑定catchlongpress长按时触发函数delete,设置相邻的view显示删除，点击删除view,然后执行toDelete函数

wxml文件

<view class='detail-box' wx:if="{{t==address}}">

    <view class='item' wx:for="{{addressList}}" wx:key="key" wx:for-item="item" wx:for-index="index">

        <view class='al' catchlongpress="delete" data-index="{{index}}">{{item}}</view>

        <view wx:if="{{isDeleteShow==index}}" catchtap="toDelete" data-index="{{index}}">删除</view>

    </view>

 </view>

wxss文件

.detail-box .item {

  position: relative;

  height: 26px;

  line-height: 22px;

  padding: 2px 0;

  border-bottom: 1px dotted #bdbdbd;

}

.al {

    background-color: #fff;

    color: #5F5F5F;

    text-align: center;

    border-radius: 3px;

    font-size: 14px;

}

.al+view { 

    z-index:500;

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%) translateY(-100%);

    color: white;

    padding: 10px 16px;

    background-color: rgba(0, 0, 0, .7);

    border-radius: 6px;

    line-height: 1;

    white-space: nowrap;

    font-size: 12px;

}

js文件

delete:function(e){

    var self = this, index = e.currentTarget.dataset.index;

    this.setData({

      isDeleteShow:index

    })

  }

6、转发分享

wx.showShareMenu();显示出转发按钮，

通过onShareAppMessage设置转发时各项配置。

onLoad:function(){

    wx.showShareMenu();

}

onShareAppMessage: (res) => {

    return {

      title: '快递助手',

      path: '/pages/index/index',

      success: (res) => {

        console.log("转发成功", res);

      },

      fail: (res) => {

        console.log("转发失败", res);

      }

    }

  }