小程序

微信小程序

页面、存储、分享、列表与 Tab 等小程序片段。 — 共 15 条

共 15 条代码片段

A. 代码类

获取当前 page

const page = getCurrentPages()[getCurrentPages().length - 1];

获取事件点击属性

const value = e.currentTarget.dataset.value;

解决弹窗滚动穿透

<view class="mask" catchtouchmove="true"></view>

iPhoneX 判断

const sys = wx.getSystemInfoSync();
this.setData({
  iPhoneX: sys.model.indexOf("iPhone X") !== -1,
});
data: {
  iPhoneX: app.sysinfo.isIphoneX,
},

本地存储

wx.getStorageSync("key");
wx.setStorageSync("key", val);

是否显示转发功能

wx.showShareMenu({
  withShareTicket: true,
});

创建动画

const animation = wx.createAnimation({
  duration: 600,
  timingFunction: "ease",
});
this.animation = animation;
const animation = this.animation;
animation.translateY(0).step();
this.setData({
  animation: animation.export(),
});

B. 方法类

转发分享

onShareAppMessage() {
  return {
    title: title,
    path: "/pages/play/index?id=" + this.roomId + "&isShare=1",
    imageUrl: "",
  };
}

图片上传

wx.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    wx.showLoading({ mask: true });
    tempFilePaths.map((item) => {
      // 上传逻辑
      app.upimage(item, (res) => {});
    });
  },
});

查看大图

previewImage(e) {
  const src = e.currentTarget.dataset.src;
  wx.previewImage({
    current: src,
    urls: [src],
  });
}

地址选择

wx.chooseAddress({
  success: (res) => {
    this.setData({
      addressInfo: {
        userName: res.userName,
        telNumber: res.telNumber,
        provinceName: res.provinceName,
        cityName: res.cityName,
        countyName: res.countyName,
        detailInfo: res.detailInfo,
        postalCode: res.postalCode,
      },
    });
  },
});

C. 配置类

JSON 配置 - 触底距离

"onReachBottomDistance": 400

JSON 配置 - 组件引用

"usingComponents": {
  "topbanner": "/components/topbanner/index",
  "login": "/components/login/index",
  "w-modal": "/components/handle/modal/index"
}

D. 代码组合

循环列表

<view class="list" wx:if="{{list.length}}">
  <view class="item" wx:for="{{list}}" wx:key="id">
    <!-- ... -->
  </view>
</view>
<view class="no-data" wx:if="{{isLoading && !list.length}}">暂无信息</view>
data: {
  list: [],
  page: 1,
  isEnd: false,
  isLoading: false,
},

onPullDownRefresh() {
  this.setData({ list: [], page: 1, isEnd: false });
  this.getList();
},

onReachBottom() {
  this.getList();
},

Tab

<view class="tab-head">
  <view
    wx:for="{{tabMenu}}"
    class="item {{tabType == item.type ? 'on' : ''}}"
    bindtap="changeTab"
    data-type="{{item.type}}"
    data-name="{{item.name}}"
  >{{item.name}}</view>
</view>
data: {
  tabMenu: [
    { name: "待接单", type: 0 },
    { name: "已接单", type: 2 },
    { name: "已退款", type: 1 },
  ],
  tabType: 0,
},

changeTab(e) {
  this.setData({
    tabType: e.currentTarget.dataset.type,
    list: [],
    isEnd: false,
    page: 1,
  });
  this.getList();
},