Display of redundant text ellipsis in app 72

Time:2019-12-1

Needless to say, there is a problem in writing small programs before. How to intercept data in the wxml page?

1、wxs

 

You must be able to access data. Isn’t it substring? But this method is not valid in wxml pages.

 

Then there is CSS. Is it different? But I think the reusability of CSS is too poor, so I will not consider it for the moment.

 

If you can’t use js, you can intercept the data after you get it.

 

In this way, it seems to be OK, but the data is a little more complex, and the data acquired in general may be displayed in multiple pages, and if you want to display data of different lengths in different pages, it seems to be a new problem.

 

At this time, you need to use WXS. The official introduction is:WXS (Weixin script) is a set of script language for small programs. Combined with wxml, the structure of pages can be builtThose who haven’t heard of it can go to the official documents.

 

2. How to use WXS

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})
// page.wxml

var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}
module.exports.getMax = getMax;

 {{ m1.getMax(array) }} 

Output: 5

 

This is an official case, WXSIt can be written directly in the wxml page, but in order to achieve the reuse effect, it is recommended to build a file call separately.

 

This is what I wrote. To create a new app.wxs file is similar to writing a normal JS method. After writing it, use module.exports to expose it and wait for calling.

// app.wxs
var substring = function (text, textLength) {
  if (text.length == 0 || text == undefined) {
    return;
  }
  else if (text.length > textLength) {
    return text.substring(0, textLength) + '...';
  } else {
    return text;
  }
}
module.exports = {
  substring: substring
}

Then in wxmlFile for reference.

//Part code of page.wxml


Title: {{tools. Substring (title, 10)}}}

This gives you the freedom to display different string lengths on each page.

 

3、Infer other things from one fact

Of course, if you want to process the time display style, you can write the corresponding function method in the WXS file to call for processing.

In short, WXS is equivalent to having the ability similar to JS. If there are other tips, please leave a message and discuss. Sharing and discussion are the better learning methods.

Recommended reading

How to make the head picture of the national flag