分类 FED 下的文章

JS_Print

实现JS打印功能

技术选择

Lodop:如果是免费版本,使用直接打印(LODOP.PRINT();)底部会出现本页由【试用版打印控件Lodop6.2.2.4】输出字样。

微信小程序开发记录

数据传递

JS向wxml传递数据

案例1

JS

this.setData({
    'key': {a: 1},
});

wxml

<!-- 显示1 -->
<text>{{key.a}}</text>

案例2

JS

this.setData({
    'key': {a: 1},
});

wxml1

<import src="wxml2 path" />
<template is="wxml2 name" data="{{...key}}"/>

wxml2(wxml2被import进wxml1中,并且wxml1通过扩展运算符将数据传递给wxml2)

<!-- 显示1,由此可见扩展运算符的好处就是省略了`key.`符号 -->
<text>{{a}}</text>

wxml向JS传递数据

案例1

wxml

<view bindtap='click' data-item='{{item}}'></view>

JS

click(e) {
    let item = e.currentTarget.dataset.item;
    //item就是传递的数据
}

FAQ

margin对第二行失效?

<text class="title">{{title}}</text>
.title{margin: 0 10px;}

使用上述方式,会发现当title因过长而换行时,第二行的外边距没有生效,可以为其设置display:block;解决。

Vue 使用History记录上一页面的数据

前提

Vue-Router mode='history'才可用,已通过localstorage实现第二套方案,主要是存储两个key:数据key和path#pagekey实现。

UI

列表页

详情页

需求

  1. 从列表页的第二页进入详情页,返回时列表页仍然显示在第二页;
  2. 从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在。

- 阅读剩余部分 -