Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve picture drag-and-drop sorting by WeChat Mini Programs". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to achieve picture drag-and-drop sorting by WeChat Mini Programs" can help you solve the problem.

First of all, let's look at the effect.

For the interior of the component. The author provides a parameter for developers to decide whether drag sorting should be supported in the scenario. These irrelevant codes are omitted here.

The drag-and-drop sorting feature uses the movable-area component provided by WeChat Mini Programs (tag, but Mini Program also encapsulates HTML, so it is called the native component). It is equivalent to providing a sliding area in which the contents of the movable-view components can be arranged arbitrarily. The effect is equivalent to the "unaligned desktop icon" effect in window-remember this description, it is closely related to the following!

The two main parameters are:

X: defines the offset of the x axis. If the value of x is not within the movable range, it will automatically move to the movable range. Changing the value of x will trigger the animation.

Y: defines the offset of the y axis. If the value of y is not within the movable range, it will automatically move to the movable range; changing the value of y will trigger the animation.

Well, as you can see, the inside is an animation triggered by js. And it could be requestAnimeFrame API.

Component design

Now that you know the tags used, it's time for formal development. But you will find that there are actually two ways to use it:

Use a movable-view package for each element so that they can drag and drop the location at will:

The picture is just a display; set a separate element to display when you long press the picture, its value is the currently selected picture, drag and drop this element, disappear when you reach the target location, and the picture list is reordered.

The advantage of the first approach is that it can have a more "real" effect. The real meaning here is that there is also a sliding animation effect when rearranging. But the performance loss is also great, you can only try your best to regulate all kinds of data to make the display more "follow". But based on this, you can achieve the real-time arrangement effect like Qzone through js calculation!

The advantage of the second approach is that the performance overhead is relatively small. But the presentation is more like web than APP (you should know the difference between the two).

In the current version, the author adopts the second way. The key js code is as follows:

Const MAX_IMG_NUM=9 Component (attribute list of {/ * component * / properties: {yMovable: {type:Boolean, value:false},}, / * initial data of the component * / data: {images: [], selectPhoto:true, showMenuImg: false, flag: false, hidden:true, x yMovable 0, YVO, disabled: true, elements: [] DoubleImg: ""}, / * component method list * / methods: {/ / long press event onShowMenu (e) {const detail = e.currentTarget If (! this.data.showMenuImg) {/ / make the phone vibrate 15ms wx.vibrateShort () } this.setData ({showMenuImg: true}) if (this.properties.yMovable) {this.setData ({x: detail.offsetLeft+5, y: detail.offsetTop, hidden: false, flag:true) DoubleImg: this.data.images [detail.dataset.index] .img}}, / / Touch starts touchs:function (e) {this.setData ({beginIndex:e.currentTarget.dataset.index})}, / / Touch ends touchend:function (e) {if (! this.data.flag) {return } const x = e.changedTouches [0] .pageX const y = e.changedTouches [0] .pageY const list = this.data.elements; let data = this.data.images for (var j = 0; jitem.left & & xitem.top & & y endIndex) {let tem = data [beginIndex]; for (let I = beginIndex; I > endIndex ) {data [I] = data [I-1]} data [endIndex] = tem } this.setData ({images: data}) this.initImg (this.triggerMsg (data, "sort-img")}} this.setData ({hidden: true, flag: false})} / / slide touchm:function (e) {if (this.data.flag) {const x = e.touches [0] .pageX const y = e.touches [0] .pageY this.setData ({x: X-75, y: y-45})}} / / Select picture onChooseImage () {let images = this.data.images Let imageLen = images.length; let max=MAX_IMG_NUM-imageLen; wx.chooseImage ({count:max, sizeType: ['original','compressed'], sourceType: [' album','camera'], success: (res) = > {max-=res.tempFilePaths.length Let _ images = images.map (item = > {return item.img}) images = _ images.concat (res.tempFilePaths) for (let iTune0witch I {this.setData ({elements: result; fn ()) })}) .exec ()}, / / delete onDelImage (event) {let images = this.data.images Images.splice (event.target.dataset.index,1) this.setData ({images}) this.initImg (this.triggerMsg (images, "delete-img")) if (images.length== MAX_IMG_NUM-1) {this.setData ({selectPhoto:true})}}, triggerMsg (images Key) {this.triggerEvent ('chooseImg', {images: images.map (item = > {return item.img}), key: key}),}})

The most important part of the above code is the code for the initImg function! It is used to get the relevant attributes of the wxml node! The parameters and default values of fields API are:

Whether id:false,// returns node idrect:fasle,// returns node layout location dataset: true,// returns dataset size: true,// returns width and height scrollOffset: true,// returns scrollLeft,scrollTopproperties: ['scrollX',' scrollY'], / / listens attribute name computedStyle: ['margin',' backgroundColor'] / / returns the style name specified to be returned here

The call to this API is the key to positioning later, and it must be executed after getting the image array (synchronous or asynchronous). It is also the difference between the second method and the first method-- the first method is pure js calculation of real-time location. So it needs to be sorted at the end.

Here comes the problem: in a scenario like this, with both x and y locations, the sort will be extremely complex, and the performance of the sort itself will be dragged down by the internal complexity of code. This is the reason for the performance problems of the first method mentioned above.

But in this paper, this method simplifies the sort to the four directions of the current drag element and the target position picture, which is the critical problem of the classic "ball hitting the wall". This is also its advantage.

Another thing to note is the setData in the touchm function. What's going on here is the change of the position of the drag element, that is, the "follow rate" (made up by myself). You can fine-tune this value to make the effect a little more nice.

Mode of use

First, introduce the components in the json file:

{"usingComponents": {"y-img": "/ components/yImg/index"}}

Then in wxml:

ChooseImg (e) {console.log (e.detail)}, this is the end of the introduction about "how to sort pictures by dragging and dropping by WeChat Mini Programs". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.