在DevEco Studio上实现移动端块级标签左右滑动

在DevEco Studio上实现移动端块级标签左右滑动，可以使用HarmonyOS提供的ScrollView控件来实现，结合JavaScript的touch事件监听用户触摸事件，实现手指滑动标签的效果。具体实现步骤如下：

1. 在XML布局文件中添加ScrollView控件，设置宽度、高度和滚动方向为水平方向。

<ScrollView
    id="$+id:scrollView"
    width="match_parent"
    height="50vp"
    orientation="horizontal">
</ScrollView>

2. 在JS文件中获取ScrollView控件，并使用createElement方法动态创建标签元素，设置宽度、高度和样式，并将标签添加到ScrollView中。

var scrollView = this.$element('scrollView');
for (var i = 0; i < 8; i++) {
    var tab = document.createElement('div');
    tab.style.width = '100px';
    tab.style.height = '40px';
    tab.style.lineHeight = '40px';
    tab.style.textAlign = 'center';
    tab.style.backgroundColor = '#ccc';
    tab.style.marginRight = '10px';
    tab.textContent = '标签' + (i + 1);
    scrollView.appendChild(tab);
}

3. 监听touchstart、touchmove和touchend事件，获取手指滑动的距离，并通过修改ScrollView控件的scrollX属性来实现滚动效果。

var scrollView = this.$element('scrollView');
var startX, moveX, endX;
scrollView.addEventListener('touchstart', function(e) {
    startX = e.touches[0].pageX;
});
scrollView.addEventListener('touchmove', function(e) {
    moveX = e.touches[0].pageX;
    var distance = moveX - startX; // 手指滑动的距离
    scrollView.scrollX -= distance; // 修改滚动距离
    e.preventDefault(); // 阻止默认事件
});
scrollView.addEventListener('touchend', function(e) {
    endX = e.changedTouches[0].pageX;
});

完整代码如下：

XML布局文件：

<ui:Page
    xmlns:ui="http://www.huawei.com/schema/harmonyos/ui"
    xmlns="$ns"
    background="{{color: '#fff'}}">

    <ScrollView
        id="$+id:scrollView"
        width="match_parent"
        height="50vp"
        orientation="horizontal">
    </ScrollView>

</ui:Page>

JS文件：

export default {
    data: {},
    onInit() {
        this.initView();
    },
    initView() {
        var scrollView = this.$element('scrollView');
        for (var i = 0; i < 8; i++) {
            var tab = document.createElement('div');
            tab.style.width = '100px';
            tab.style.height = '40px';
            tab.style.lineHeight = '40px';
            tab.style.textAlign = 'center';
            tab.style.backgroundColor = '#ccc';
            tab.style.marginRight = '10px';
            tab.textContent = '标签' + (i + 1);
            scrollView.appendChild(tab);
        }
        scrollView.addEventListener('touchstart', function(e) {
            startX = e.touches[0].pageX;
        });
        scrollView.addEventListener('touchmove', function(e) {
            moveX = e.touches[0].pageX;
            var distance = moveX - startX; // 手指滑动的距离
            scrollView.scrollX -= distance; // 修改滚动距离
            e.preventDefault(); // 阻止默认事件
        });
        scrollView.addEventListener('touchend', function(e) {
            endX = e.changedTouches[0].pageX;
        });
    }
}