uniapp 实现点阵(8x12)效果

目录

一 、简介

二、主要思路

方法一：

方法二：

三、总结

---

一 、简介

        本文用两种方式实现一个8x12的点阵效果，主要用于自定义点阵图案，生成点阵数据通过wifi/ble等传输途径，传入嵌入式设备驱动点阵屏显示对应图案。

二、主要思路

方法一：

        构建8x12的点阵视图

        采用两个for循环生成一个8x12的矩阵

<view class="test-box" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view class="list" v-for="(list,listIndex) in 12" :key="listIndex">
				<view class="line" v-for="(line,lineIndex) in 8" :key="lineIndex">
					<!-- @tap="changeColor(listIndex, lineIndex)" -->
					<view class="little-btn"  :style="{backgroundColor: clickedViews[listIndex][lineIndex] == 1 ? 'red' : 'white' }"></view>
				</view>
			</view>
</view>
<button @click="clear">清空</button>
<button @click="revocation">撤销</button>

           设置布局

.test-box{
		display: flex;
		flex-wrap: wrap;
		width:136px;
		height: 204px;
	}
	.list {
	  display: flex;
	  width: 100%;
	}
	.line {
	  width: calc(100% /8);
	  height: 15px;
	  border: 1px solid #000;
	}
	.little-btn{
		width: 100%;
		height: 100%;
	}

        效果图

          js 代码

data() {
			return {
				clickedViews: [
					[0,0,0,0,0,0,0,0],
					[0,0,0,0,0,0,0,0],
					[0,0,0,0,