GitHub Demo 地址:
jh-weapp-demo
实现一些常用效果、封装通用组件和工具类
小程序码
效果图:
demo代码:
js 代码:
Page({/*** 页面的初始数据*/data: {arrowSelectArray: [{"id": "1","text": "11"}, {"id": "2","text": "22"}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.setNavigationBarTitle({title: 'JhDropDownMenu'})},clickItem: function (e) {console.log(e);console.log(e.detail);},})
json 代码:
{"usingComponents": {"JhDropDownMenu": "/JhTools/JhDropDownMenu/JhDropDownMenu"}}
wxml 代码:
<view class="text" >默认样式,绑定点击事件 </view><JhDropDownMenu array='{{arrowSelectArray}}' bind:clickItem='clickItem'> </JhDropDownMenu><view class="text" >设置默认选择第一个</view><JhDropDownMenu array='{{arrowSelectArray}}' index='1'></JhDropDownMenu><view class="text" >设置提示文字</view><JhDropDownMenu array='{{arrowSelectArray}}' hintText="请选择"></JhDropDownMenu><view class="text" >通过属性修改蒙版颜色</view><JhDropDownMenu array='{{arrowSelectArray}}' maskColor="rgba(0, 0, 0, .5)"></JhDropDownMenu><view class="text" >通过属性修改背景颜色</view><JhDropDownMenu array='{{arrowSelectArray}}' bgColor="red"></JhDropDownMenu><view class="text" >通过属性修改宽度</view><JhDropDownMenu array='{{arrowSelectArray}}' width="200px"></JhDropDownMenu><view class="text" >通过样式覆盖修改背景样色和宽度 </view><JhDropDownMenu array='{{arrowSelectArray}}' menu-bg="menu-bg" menu-content="menu-content"></JhDropDownMenu>
wxss 代码:
.menu-bg {width: 180px !important;}.menu-content {background: orange !important;}.text{height: 30px;margin-top: 10px;color: gray;}
添加Component方式:
Component({/*** 组件的属性列表*/properties: {externalClasses: ['menu-bg', 'menu-content'], //不能使用小驼峰命名,只能用 -或 _array: { //模型数组type: Array,},index: { //选中索引,默认0type: Number,value: 0},},/*** 组件的初始数据*/data: {isShow: false, //初始option不显示},attached: function() {// 页面创建时执行console.info('---JhDropDownMenu loaded!---')},detached: function() {// 页面销毁时执行console.info('---JhDropDownMenu unloaded!---')},/*** 组件的方法列表*/methods: {}})
外部调用组件的方式
"usingComponents": {"JhDropDownMenu": "/JhTools/JhDropDownMenu/JhDropDownMenu"}//如果覆盖样式 ,需使用important<JhDropDownMenu array='{{arrowSelectArray}}' menu-bg="menu-bg" menu-content="menu-content"></JhDropDownMenu>.menu-bg {width: 180px !important;}