企业官网建设流程全解析

一、完成效果

二、制作流程

1. 编辑 index.wxml 文件

<!--index.wxml--> <navigation-bar title="slider 组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">滑动条和颜色</view> <text>红色滑动条</text> <slider>/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .color-area { /* 设置宽度 */ width: 100%; /* 设置行高 */ line-height: 100rpx; /* 设置字体大小 */ font-size: 60rpx; /* 设置字体加粗 */ font-weight: bolder; /* 设置字体居中对齐 */ text-align: center; /* 设置上下内边距为40rpx，左右内边距为0 */ padding: 40rpx 0; /* 设置上边距 */ margin-top: 1.2em; }

3. 修改 app.wxss 文件

/**app.wxss**/ .box { /* 设置外边距 */ margin: 20rpx; /* 设置内边距 */ padding: 20rpx; /* 设置边框 */ border: 2rpx solid silver; } .title { /* 设置字体大小 */ font-size: 40rpx; /* 设置字体加粗 */ font-weight: bolder; /* 设置居中对齐 */ text-align: center; /* 设置下外边框 */ margin-bottom: 30rpx; /* 设置字体颜色 */ color: red; }

4. 修改 index.js 文件

/ index.js Page({ data: { // 设置颜色的初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 拖动过程中的事件处理函数 * @param {*} e */ colorChanging(e) { console.log(e) // console.log(e.currentTarget.dataset.color); // console.log(e.detail.value); // 获取slider组件的自定义属性的值 const color = e.currentTarget.dataset.color // 获取slider组件的value的值 const value = e.detail.value this.setData({ //[color] 是计算属性的用法 // 将value值赋值给计算属性color的值 [color]: value }) // console.log(this.data.r); } })

三、个人总结

希望可以坚持学下去