If you don't study, you will retire, study hard, and make progress every day. To learn a new framework, you must write examples to deepen your understanding.
SO, imitating the payment application management interface to write a small page, as shown below:
The third-party plugin vuedraggable is used for drag sorting at the top [My Application], and better-scroll is used for the bottom menu title and bottom scrolling content. All application icons use Ali's font icons, click [Me and Application] You can add or delete applications by pressing [+] [-] in the upper right corner of the application icon at the bottom. [My application] is saved in localstorage, use vuex to manage data when adding or deleting, and update it to localstorage. The entire page is divided into upper, middle and lower parts, as follows:
1. The top [My Application] is fixed on the head and implemented with the sub-component drag-list.vue. The code is as follows:
Because the number of applications is uncertain (the maximum number of settings is 11, that is, three lines), the height style is dynamically calculated according to the number of applications, placed in the calculated property, and the value of the height is stored in vuex, so that the bottom two blocks The margin-top can be adjusted normally, the code is as follows:
computed: {
calculateHeight() {
return {
'height': this.dragHeight + 'px'
}
},
...mapGetters([
'dragHeight'
])
}
The method of drag is as follows:
methods: {
onStart(evt) {
this.isDragging = true
},
onMove(evt) {
var item = evt.draggedContext.element
return !item.fixed
},
onEnd(evt) {
this.isDragging = false
// the last one is Empty box, dragging behind empty box is not allowed
if (evt.newIndex > this.datalist.length - 1) {
return false
}
this.sortDataList(evt)
},
...mapMutations([
'sortDataList'
])
}
There is an empty box at the top, which means that you can continue to add applications. If it reaches 11, the virtual box will not be displayed, and the virtual box cannot be dragged, so the data is set with the fixed mark, and judged in the move event of the drag, if fixed If it is false, it can be dragged, otherwise it cannot be dragged. In the end event, it is judged that the dragged position cannot be behind the virtual box, and the order of dragging is updated to vuex, and the sortDataList method is called. The method is as follows:
sortDataList(state, evt) {
let oldIndex = evt.oldIndex
let newIndex = evt.newIndex
if (oldIndex === newIndex) {
return
}
let list = state.myDataList.slice()
// get the dragged element
let item = list[oldIndex]
// and remove it from the array
list.splice(oldIndex, 1)
// insert the dragged element at the new position
list.splice(newIndex, 0, item)
updToLocal(list)
state.myDataList = list
}
2. The style of the bottom two areas is the same as that of the head, but the drag is missing, so another component grid-menu.vue is written, and the common method with drag-list.vue is written in mixin.js.
3. The bottom header (as shown in the figure below) scrolls horizontally, and the content scrolls vertically, all using better-scroll. And click on the title header, the content area scrolls to the corresponding application, and when the content area is scrolled, the title is also linked
import BScroll from 'better-scroll'
// Horizontal title scrolling
this.titleScroll = new BScroll(this.$refs.titleWrap, {
scrollX: true,
scrollY: false,
click: true
})
// Scrolling of all application data at the bottom
this.allListScroll = new BScroll(this .$refs.allListScroll, {
probeType: 3,
click: true
})
Complete code path reference: https://github.com/bewhatyouare/vue-learn