Extra text ellipsis applet seventy change the display

Ado, before you write small programs run into a problem, how to intercept data in wxml page?

1、wxs

 

Surely it will take data, not that substring it? However, this method wxml page is invalid.

 

That there css ah, not the same can be done right? But personally feel bad css reusability, it will not be considered.

 

It is impossible to use js chant, the data taken in the data acquired after.

 

This seems to be, but the data over one a little more complicated, and generally get the data may be displayed in multiple pages, but if you want to display data of different lengths in different pages, it seems to be a new problem.

 

Then you need to use wxs the official description is: " WXS (WeiXin Script) is a small scripting language program, combined with WXML, can build a page structure ", heard of the official documents can take a look instructions.

 

2, wxs how to use

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})
// page.wxml
<wxs module="m1">
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;
</wxs>
<view> {{ m1.getMax(array) }} </view>

输出：5

 

This is an official case, wxs  can write directly wxml page, but in order to achieve the effect of reuse, it is recommended to build a separate file called.

 

This is what I wrote, app.wxs create a new file, like writing a normal method js almost finished with module.exports after exposure, wait for the call.

// 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  wxml  file referenced use.

// page.wxml part of the code
 <! - introducing app.wxs script -> 
< WXS the src = "../../../../ utils / app.wxs" Module1 = "Tools"  /> 
< View > title: {{tools.substring (title, 10)}} </ View >

This will display different free length of the string in each page.

 

3, giving top priority

Of course, if you want to display style of time to process, and they can write a function corresponding to the method call processing wxs file.

In short wxs equivalent and have similar capabilities js, if there are other tips are welcome message to share and discuss to discuss is the better way to learn.

Recommended Reading

How to make flag picture | applet seventy change the canvas to draw pendant Avatar