微信小程序-canvas补全之实现手写--可滑动导航栏
canvas
上回把简单的canvas写了一下，我们可以实现一个简单的一条横线，现在我们来补全这个，实现一个可以手写的一个canvas。
<canvas style="width:375px; height:400px; border:1px solid #333;"
canvas-id="canvas" bindtouchstart="start" bindtouchmove="move"></canvas>
这个是一个canvas 不知道里面属性的小伙伴可以去看一下我的上一篇，
start(e){
console.log(e) //这里我们可以打印一下看看我们所点击的点
this.x = e.touches[0].x //保存起始点
this.y = e.touches[0].y
},
move(e){
this.x1 = e.touches[0].x //同样的找到移动的每一个点
this.y1 = e.touches[0].y
this.ctx.moveTo(this.x , this.y) //开始画图 拿出上次保存的起始点
this.ctx.lineTo(this.x1, this.y1) // 移动的方向
this.ctx.stroke()//连成线
this.ctx.draw({ reserve: true }) //这里是一个重点是指保留之前的轨迹
// 这次的终点是下次的起点 这样可以进行前后点的衔接
this.x = this.x1
this.y = this.y1
},
scroll-view 可滑动导航栏
我们在使用app或者小程序的时候总是会见到这样的页面 （我自己写的简陋版…）
点击左侧右侧则会滑动到对应的位置，楼梯效果，我们可以通过之前的html知识来进行设置，但是微信小程序给了，我们又何必自我难受呢。
来看看他的wxml结构
<view class="boxV">
<view class="nav"> // 这里是他的左侧
<view wx:for="{{cont}}" wx:key="*this" bindtap="boxV" data-idx="{{index}}" class="{{boflag === index? 'active':''}}" >
{{item}}
</view>
</view>
//下面是右侧
<scroll-view class="bigbox" scroll-y scroll-with-animation="true" scroll-into-view="{{viewId}}">
<view class="item" wx:for="{{cont}}" id="item{{index}}" wx:key="*this"> aa </view>
</scroll-view>
</view>
在右侧里面scroll-y 是允许纵向滚动 ，scroll-with-animation允许滚动动画（可以让跳转不那么僵硬优化客户体验） scroll-into-view ：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 data-idx则是记录当前点击的是哪个dom这样我们就可以让他变红了 class名给了一个判断如果当前的dom是点击的dom则给他一个active的class名字,在active里面写css color:red;就行了
然后是wxss
.bigbox {
height: 600rpx;
}
.bigbox .item{
height:300rpx;
}
.nav{
width:100rpx;
text-align: center;
border-right:1px solid #ccc;
}
.boxV {
display: flex
}
没什么好说的接下来是js
Page({
data: {
flag:false,
cont:['11','222','3333'],
boflag:0,
viewId:''
},
boxV(e){
let dla = e.target.dataset.idx
this.setData({
boflag:dla, //吧当前所点击的第几个dom传入进去
viewId: 'item' + dla //让item加序号组成一个新的id名字 方便scroll-into-view来控制显示右边
})
}
})
为了避免有些小伙伴不看代码的注释，我在这里重申一下，这里的重点是，获取用户究竟点击了那个dom，所以我们可以利用data-来进行一个传参通过判断当前的dom是否为点击的哪一个，来让左边变红，跳转则是利用scroll-into-view来指点跳转到哪里，其中自元素的dom必须有一个id这个id和scroll-into-view的值对应即可跳转，
一些小知识
小知识1：如果想让左边横向滚动而不让整个页面都动的话也是利用scroll-view这个标签只需要把scroll-y改成scroll-y即可里面的标签填充可以使用view
小知识2：我们在使用view标签的时候会发现paddng-right会经常给不上，这个时候只需要加入这个属性即可 box-sizing:border-box;就可以给上了 意思是想要设置的边框和内边距的值是包含在width内的。即原先的盒模型似乎是吧padding放到了外边
好了今天的就到这里 ，，欢迎各位小伙伴留言公讨