从0开始学习制作一个微信小程序 学习部分(6)组件与事件绑定

news2024/10/5 19:09:06

系列文章目录

学习篇第一篇我们讲了编译器下载,项目、环境建立、文件说明与简单操作:第一篇链接
第二、三篇分析了几个重要的配置json文件,是用于对小程序进行的切换页面、改变图标、控制是否能被搜索到等的操作第二篇链接、第三篇链接
第四五篇学习了框架、api组件:
第四篇链接:rpx和轮播图
第五章链接:文字组件和跳转组件
本篇会将组件讲完,并进入事件绑定的学习。


文章目录

  • 系列文章目录
  • 一、scroll-view组件图片滚动
    • 1.滚动代码
  • 二、background image背景图片
    • 1)框架
    • 2)scss
  • 三、事件绑定
    • 1)绑定方法
    • 2)处理函数
    • 3)返回函数实例
      • a)文本框教学
      • b)冒泡事件和非冒泡事件
      • c)问题实现


一、scroll-view组件图片滚动

1.滚动代码

<scroll-view class="scroll-x" scroll-x>
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>
.scroll-x{
   width: 100%;
   white-space: nowrap;
   background-color: yellowgreen;
   view{
    display: inline-block;
    width: 300rpx;
    height: 80rpx;

    &:last-child{
      background-color: red;      
    }
    &:first-child{
      background-color: blue;
    }
   }
}

在这里插入图片描述
可以实现横向拖动。scroll-x是横向移动,scroll-y是纵向移动。

二、background image背景图片

注意,背景图片不支持本地图片,只能由网络图片。

1)框架

<view class="bg_test">a</view>

2)scss

代码如下(示例):

.bg_test{
  height: 400rpx;
  background-image: url(data:image/gif;base64,R0lGODlh2ADJAHAAACH5BAEAAJgALAAAAADYAMkAh2yQqmxs/2yQ/wAkqgAAAAAAVUhs/yRIVZCQqiQkVQAkAGxsqrS0/5C0/7TY/9j8/9jY/5CQ//z8/7S0qrTYqpC0qkhsqvz8qtjYqrRsVWwkVUgAAEgkVSRIqpAkAGwAVZAAAEhIVWwAAEhIqmwkAEgAVUhsVSQkqmxsVQAkVZCQVdi0qiRsAABIACRIAJDYVbT8VbTYVdj8VZDYAGzYACS0ACTYALT8AJD8AEi0AAC0AEjYACRsVSRI/0j8ANj8AGz8AJD8VWz8VUhsAEjYVQDYACTYVWzYVQC0VWy0VSS0VUi0VWxsAGy0AJC0AACQAEiQAABsACSQACQkAGyQVZC0VWyQAEiQVQDYVUj8VbS0VZBs/7SQqiSQVbRIALQkALRIVbRsqtiQAPyQVUhIAABsVdhIAPxIVfxIALSQANiQVfy0Vdi0ALRsAJBsVdi0VbSQVZBsqvy0AJBIANhsANhsVdgkAPwkVdgAAPwkALQkVZBIVZBIqthIVdiQqtj8qrTYAGxIAPxsAPyQAJCQAJBsAPy0qvzYqvzY//z8VdjYVZDYqmxIqti0/9jYALSQ/2xIVWzYqiQAAEgkAPxsVZAkVfyQqiQAVQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAj/AAEEECBAIEGDBQcmPKgQocOGEBlKXEjx4USLFSNmvKgRo8eOIDmK3Ejy40iTBQcQKDCwpQADAlwOhCnzZcybM3HepKmTp0ufO3XmrAl0aE+hNokiLZr0qNKnTqP+XEoV6lSXAg4QICAxgEWvEcF2/Uo2bNmxZtOiXbtQbNuzb9XGZWvQbV24d+XmJRgTgUoCPAMHNSqY8OCmhREfTsx4sWPDkBVHbjz5seTLlDFbFpCAgAKUoEOWFB36JOnTplOPVl16tevWAFSybHpV6uHauG/rNpqb927av5kKr2rbt3Hgx4db1Zl1a0y8LaE/1xud+nS61bFfn8t9b/fs37d7/x8Pnrz48jL9bs3M3nL7yvA1x38vvz79++7zx+e8FTbq1//5x1qABA5oIIAHCpjSSsslR1xvyEWoXHESPhichQ42WKGGE0IIVHNchWdXdmLJVBdOJ5Io3Yjntcjii2eViGJNMoZ1k4gz8kVijjDK1ddf+M2HoX36ESnkkUYmSV9tiTFZJH8EKLiAQlMyBEBCAk15pUBZtqQliwiGqSBGVQbw5ZdcmukVlliqueV/aIKlpQBV0iknWGPKluFRDDAAUwMO/PlAAy/1CYEDEPAFAQOHQmAAoIf6eZmHQ3Z4YU59/hkopA74aSiiikZgkwCHDhohYZAyGgEAjLYaQaYCAP9KKqOIrkrjqQRpxVWPYwkggQQTMCABBAs08AADxwLggAQNIICsqAJQIAEDESBwbAQTPDCBidbxKuKKd/nqgEAQQGAttdlOsGy1yAqAwLQzVTBtBMkSpJcAFUDwgKgBINCABA6I+muww8o7QbURRICVeS2pB1iRNEUAgQQPUAxBBBJEsAAAGZeLgAHLVmBAAMKaibHGHDdgUJBKQvyYxIt2erEEdKZcLgAWhOyryjCdvADGKse3gMcwPaqtARJTbPHJCFTLMpQKDvuAvhBMAGwDVhPMAAWHrmqA1QgEUMEDFfQ77QItilmg2gRd8OuvVUtQ9rsEN8B1wOe2ZPXc8Kb/7VC5BPU87ZVTFx53owzUCZueFAoGAQbsztwqs+VS7dWfNAPgcwCDW7qnk59fOPHEw2JsJ+XlDuvVuw0sIPiqwtp64QJTf/wSvRPA9HgEFagqAQCul3npjbpqVyLhDkx56NgRGADAscgGsGyiylLNgLJTA47ntw0VNFd0Gb3pIlkCTE04BNUjir4DD0g/rLsPPIAoA2OX+4D3DHNZbkuIDhuw/MpzQP0q1wBuseVH63GZQhAgAIUxsGyiKiADH+iuADQAWxEoYMKoZbsAKEyB9fHgUD6IJJ5U8EoajJXTRBU2FnoQgwW8IKEAsCQW9gxd1aqgCy+ILtBdBmoFMpOx/8i2MekBznUI0Nf11MS+NKnPTkmsF2gEkAENbEAD4rPTlRB1vylF8Xpss1NMyoQARC2sOhR4QNj8FiBSVY4BQvSfV5Clr3GtLTYM2tBRGgCBnC0qABfDXqwcgICUvYSPmQMk7O4HqELOazkw4QAHNrCBDkQQJg1UpCABBYB3UYtDRxHMvwiZk6IdcmIFyQylpHe9oQ3KWHRyns8WwCwaDkkhxfNWuIZFLgiMTYLaYh+d/iWqr+1LbMzqVzC7SMzr2MV7HvgACDYQAoIQElDIBKa6mJkxZ4KrOgAoF9oCEKxgMSBwYDseesbnpQZgAGC+ihQcq8eAd8LxRgxD4MOOBP8zmNQqczsjGrJEJgBhFeRkV0Ldx4SVu/x8QAQQHYHtGPW6hPLRXAZAVkNLeJva6U5pZIOJQVcGQsEIa39RbACtXtinWiIJiAfK1zkDxqp9VWBcbmTVPAMgLQbWlHc4vVmfXiMAEpRABBuwwKoAxYCw/fSmVzqUTsOIkSjaKmEMnKH7KsCXMVHpX770nvyiir6ESPWOjFvlTRbAqPvZUlhNdR4gF4VJwzmqoNPqYLkCNbwSUNID/RKAA/oVV7zGtZd8DV1y2joxrz2nrlS7qylBWUouso+mhSPko5TYweHh0jncWwueRpSXNE2ntOqkywBCoM4rnRacqQ1tXNLkWhX/jZY5+UuLabdH224hRJ8si5gqhzchymishcUlTnCR4kMfLneEyd1PZ6J0R9TosroJwi7bwOTV7Hq3JIzznB7VSl7Pmlex4z1vetErXvF+dlffNF58ZZvbruBznddlp3x9y9/9Gg+4JQ0wRwfcMgI/t8AIPjBMqard7jL4uw6OcIMbnFb1trdSGKZs4zK8YQ2Xl70cfq9/6Yvf+daXxPpFcX5XbOIS+6hfQBJwgmV84BrT+MYGlvGCJQzhCff4xw8OMo/Bm8cLe9jCIUbykUG85PU62b25cg6L+6viFqf4xFh28YizfGUttwXAOQ7zjMVsYzLjeMw/nO6Q1+xjIbeZx81AzlMeP/zkJDO5w3ims5HzrGQ+g2jLXubylAHd5UIPuspUFvRvYZxAMzsazWWG9Jkj/TQ1v/nScca0mzPN6deE1851bvKe9QzqUfeZ1BoS8aEVnehAu9rQVl71q2XtIjBL+tGUnrSucb3rpuxY03DetLCDTWwKz/nUyL4zqvms7GSHmtnA+TOiCU3rasf62q2GdbbdYutc8/rbtw63t9H8604X29zATje6WfNpUZf63e6ON7RN3Wz0qhrb1Mb3tPfN6nxve0X/3e71uAcu8IKDOzPlHra6Fb5uhjscNBWu97OXTXFn03viFreQtPvN71nrm+Mg9/i/qRzwgxtc3CcnuMkVYumGn/vhC3+5zNs9b3jXXN4Vl/jFd87cKMN35P4Oese1LfSQEx1HjN4nyle+9Kar3OmHSbjMY051l1edqhHHuM5tnnOte53nOPd50UU+9qMb3dpAHzq3k/70tqf87UyPtNSvPnWr2x3mCaJ518F+877vnesZT7XY0V52wqv942Q/fLdKDvW4w73xkK90f+hO+bvXHe9iyjrf/x72rXf+64D3zcYTf3bEm530qD+96tfuMLc7/vWRfzx95m75ymP+8rhv/4jeA+933nO+954HPvGkbHrDlz7txy988Rnv+tjDvvnQv1HLb2/73Nf++hXRfOhB//nN+/77zR796otPfuSn3vjnX3TrZc/+57ff+b6evvWpj/354373wf+9/sHPfeFD+c/oN37mJ4DKN4AB2DAx5n4KCH/Rx3S0R38QaH/VB2za133b5335x38YmF7id4DlV4AgqHgh6B3M934NyIAm2GsPKIH1N4EtCGH413/7l4E0KIMa2HMA+IEiuIPJx4Ppt3hsl4ILeIJEqILy54IRiIQsKGQV6H8X+IQWGIVOuBwdqIM9eIU/OIJZyB0lOIRCiIJe+FJH+IJJWHuxYQJK+KFmMbiBbAiFfbcACdABFnArbfh592aAVriFPbgAHYABITCHWkiAXxaEYQiGsbcAIVAuHeA6X6hgY1iGkDh1fOg2fgiIkWhsszGDNliDG2gBB0A6EnACFlCHUzh8IYKFgoiKB7gAJ/ArlPiHXaWHW9iFhliEvGYBifg2w7KItohgK5iGZChhk/g2r2iJS7g4ReaGmkiKy+aJoPg2EHACjCiFXf93h4HogXiYdqyoi7pYidlYeLTYi+J4Y7j4jLoIAbzYiE/yiMcIjG42jNwoAcUYi8FIGk24jMp4gxrijPHYjdJIh/kYOlX4jT6YiufHim7jNtBYOVWziLZ1jXARjupYiMtVjr+CAaSDAikQAgnAkazVPBOZZpNXjyQJc8M4AQmgAr+CAAfgjsg4G8yojxRyKzRpc54oASuQACiQAMMiAQkwjaVYjYOXhwZ5ZW3SW0g5WlyyEd7ChxSQAHPIWgOTAERZbRJJkTQWAM4zMkWjlTTklVz5lVsZYAtwAD/ZQCOQixAQAiNQiyD0iyWpIARhAinAAi1gly6Ql3qJl3eZl33/6QJ3yQIKYAKiIiBqchAn8C4YUJaXmHfHxokBCRxI0wEm8AKWCQMxIAMUIAMxEAMvAAOfGZqg6ZmgCQMHgIbqRSMWIFEhgAJIA5lhN5AQSZAIEQIdMAM0UAM2cAMwwJs4kAO5qQPCOZy6uQM7AJwswAM5gmICMAI9gDaqqG9X6ZYGFgEHgAK9WQM+0Js38AM0AARBQAM6YAPjWZ47IARAAAQwYAJDEDg4BpJYKV0j2ZgPJwB/+AMwYANEwJv4CQQ0cAM5IJxFQJxGQANHQAMwMAQHwEYGwl0u2RFrGJltiDQHsAAy8AM6sAM3wJ/fGZ7lSZ4g+p3/yZ4A2WQlGpSp/zmUtCmLKXaf+WkEvOmb/5kDAyqgOlADRgAER6CeCnpfRYmN1Dad41hC1omdP6Cd3OmdCCqeIFqePrAD/nkD7Ome8Ql/cEmfCjIQLqqf/AkDUUqjOlAESDCgNpCjO4ADCeoCCtOOwXiPMrl/FGqhGOoDGwoD3gmeTPqhOvCkUToEQ4CP1Ihs0sYX9jKbgWifFiADMpADRCADMKCoOHAEMJAENaAElXqpSxAER4CmTFBNLAqk+wZgk0Wd4madB9AETvAENdAEM8CqUJADTQAFUfAEtDqrUbADUpADUjADU9CepNqLUDJBOZRFbEpVdNIBCuAZCpCszKqsy/qs0LoVCv9wAJhUrPYnGymQAAWQANlqSbCJorzRAAlABVSQBCyQBFRQBUlgBVdQBSwABTzAAvJqAuT6AibgAhUkofoqeCBioP4KBZ8hEqDagwQxBRXwAzhQA0KAnzdAA2hqAzVAplhgA1mAA0GgBQqAW59alQCXdMD5sTmQAgRVpcuFNApQAb35BEDQnTCAmzegp0VgA1FaBS7gXCH5dFBCsUAgBA2bABrzoEBmsAirsAzrsDBQA2E6puOZBTQQBDRrrUooGzUABFAaBDOQArbTJG9qcRGgAFqQneqJn7gJA3oKsTNbs+C6iTYIIjr7n7zqWrXFsQN4EwZ7Awm7sL1JAzOQnxH/G6ZLC55OMAVCIbeGyoVJp51Ve7WdNaRj1rUoewNPIAR22rL/WbZT+580a7Mka4RbUQNEsLM9+7Nx2WZCGwREm7doirRiKpw7kAXgSbM+iqXVJ7VUu7KKO6qAWoomOwFgO7lja7lnW5N7xhS5S2fvpbO2OwVwu6JFWah0WwF2e7oNu7cQO6Bk6rpBELgae3Q8spzRCYQOs6dQ2rJYy7g2BhMnm7IrK7aV26Q2ILOYi7aPJkIk9KubMV1NkAQvkAQxQAUJIEayeyBhgwBbIBAqgAB1a7p427Cpm7TCSbFN+7SXdiUtoAAtUMFXQKxAuyAFYMEe7AKJGaiwOcAexAUr/zAFX3sDU+u7CAq88WuiOBEBq1kAKcADV9AFS3AFLVAAByBRxWteIGKXQyCY41S4RucuC+AFX7DEYBAGYjAGZKAF0bvAesu3Nqqz2ZuxBoR0fTECLRAF5FkEYhymRZADUdACZRC3zOst+qS/mZkCAgGf9iskC7AAX2AGZ4AGYAAGXjAGKJyyksu+L+u+l3sDmStgINkBB4DDZRumFxyviWm+0rcVVMubU4A2Aaw2KsAFaaAGa6AGbKAGbZABU1AFN6DARdvAq5uhTOu0+NpgIxAFSiCxEkueyRoFS/AEUQC1ByEbUDoDN5ACVKC130pqMOEGWtAGYuDJbfAGcKAGf/+swmFLuWRLyMHbcx0SAYrcBUjrvh+6FVGQA0rwBCH8QTF5HO8FBPsJAy5QxAN7fs8hACoQB58sB2ogBnDgBggMvXdbtNTbt9cLuIJ7RvrVL7E8y2NsvTf6BArQBRX8BAity2psxOnxF7/8A8K8ufMBPCqQAWqgBnKQAWKAAnCQvpC7vpQ7yB9ayIfMTx40AgdgqY0MsU9AAFDQBSwg0zbQBeS8uF8IJVSLppc8ugMSNm3gBmngBm0wB3RQB14ABk1TutJrtKqLBKzbyhKcIAdNpsNpA0prAwzdBTaABWQ6pkUg0S7py0AAzMJ8zqBHEw0AB0mdBm3QBl9AB15gBv3/4rW9y77VvNLXTF7aHNPdPNPCGc4zPc4hvLWipys7K9RFXJCG1zRvwAVPjQZ2gAZ3YAdn4AV1UMpT7M9W7LcQnL0D7b00ggBbndB+y9Wu3dpJK8YSbS+Eay8OA6U4EMwkpdGKsQAIAAdwwMd3nNl4kAdzIAZ8DbmBnNJlC7+GLL/yoTCDzc2G7c1c7c073dOa23RQQgNEANlEHSYqsAB0AAZ2YAdfoAd7wAduEAcJPNWqbNVLG8GvzBpbPZ5KW6P4/cBfLd9eTctnvctRuxK/DANtzX8nSmoooAJf4AXFDQZ9EAZ+EAdckNwr7Ncu/NzCG8OKrNPV/eHYrdhrVMzM/+HY69zOOrJ8GhHPrHYlUzInhFq3/Zy3/6zQWKy9BF0iqi3Lr63QPg7bPx7kAT7Rg6gjKUaoPoqAW3HRGY1yoyocWinHS9IX/VJKAmDSKsuyLpvhLS0Z0r3NhY3dIA7iPL3YlfHkOjZdlQwDQy1sYaOXLnAlAdA9qq2XJhBsQjvjDHy0DszK9G0SXtEBPF6eAlrGX3wF1uvfXS3fYlwDh17Wsi3gHEHAGRAGBGxLJPESlG7pWzAqDqHWbD3MgKfIVfAHnXkCJyIAFvCTmUkBQzAC9XthaG7h0/y71vzCUjHYHu6+Z6wAUDDmINrrv+6+Ii5CQbEAcbAHGeDbuHsUyP+u7MwebY69qWwe2SDXAUNQBQyboENw53M5Ak0gA/w5Ay5gAiZAj8w5EDI+1f/8wH9r2j1n0IP+45UqmIMZxkAO2/W+rCaA72Ia6akeNmbQB2hgBgNPwCmuEAQh8ARv8H0QB52u8En3y7ptZqv+qN25oVXw6h9ZABVwoSz7AyFgAg75nli+3Fvuvs7d5cKl62H+obPKA8l6BcAe8zM/02W+RjBRx2ZAB2ZQ8HQQ7YKx8wvQ8z/f80I/yQRgoOD9YHMeAFRwADEKAzjwny/wA01wABHgAqYcBLzZtDcwAzHQzg3GF1JNxfH9wFhd3xVx314toEpbwTUwq7O833b/9jopIPd0X9YPTNZD7i5bMAcbMAcZUN5tQAIbANUFDBEELPiEb/iID9XF1Mv/BA4EnzmuxKxHrxkACUABdpsDMuqogFAAIUAFf0ADqH/K//kDFOACQ89hu9vX1Mzl0N0SLl/dFlwDlwrsuZ8Dulnd4zwAYRMHczAGJEACHuAFG6AGGdAG0Z4TyF78JBAIyb/8zf/8Pqej4E12gU4GBwAIMoADwNyb5I+wLNAE+ImgU8+fUHDuJmABRk5fArDuVFzjpI29OI4TO173Qe63ABElig0kRXQYRHhQYUKBNhY+TFikyJMobcCYGUNmCgkSUxAIAtOmDgABAAIIEJDhYsYEHD0OCjkSZQAEAwgQ2AFkxo8UVE4aEPAzqACgQo1GAJpgwQEKMH4EueEUxo0b/z+kypAaleqPqlNTLEhgoijRoWPNliUaQUGFqU+AdJ1B44YOh3VrAJFbxcVJvhFGHFBSg+7guoSV7CCcuPDiw4od1+3yZE8dL2MQYNijhsuKOmbA1Dn7+YtlzJo5ewaNEmWCm0B2RJ2yAKXJ2SdL2qZ9e/aJJjK4ap0aHPhw4cWtuIjhwkRJ3c1zP7c9pcIPHDWEWL1BAwcMwUWQ6NCxIwuNIHppBwDQIYoSgw7BE3wP/qF7ut8Hv7dvEH/8/QexSCSkEDPqUIMyMNTww7MMwoBuwQEL9OJANRRkEDebCshphht6Gosvsjw0aigL2JKhK66w62orp1Jk8cQYAPljiP8ODjgLxA+HEkoBLaa6KzgcaIBBsbvy2iuoCGbsQrDFHmNySSebfIwJQrwwQw1DDFnDEDW8oOMzoYAKI4M+6LASSy259HIoAQ5oLYuoXJDNRjlxnK0D5IjDs7g88bxhiCYSUE1NOm0TVADpbqjuuqm0C8KhhGzIAoggnFAgqPTWkyhTiDaNiNOFJPK0U4SKqMEIF1C4AIJDVEUEAfRmUtMkFCJI9RBEbHV1UABswkmnDWmr8cazOrAAhhJ/oypZZJFNtipln1URkBQqCPYsoK5VqwKqdBCiqiBokCsxUl3DQa+TZgysCEehLKw9dhVa0t0nHXqCgCEQOASDQw55Y4T/XGu0gIAQ8NWXX3+vVZNNAmZ4IYY/YkNgiwVoQo+mCBZYAIEIEIjD1YlRGAFGGUYm+QeSTzY5kZNHNvYPk0d+WQZFhghh44wDiKNjiSkmyWOLPZIhBiheUFmGKmBsAoocrsihiyYWmQEGLTwawQUqclAihyW0XnrpJq6AoouuxV4CCqa3ZpppsrsGO+2mu0bba7DFZloJKxS4iYAFbF1hCr17XsCknFUoIO+9EZmAtYx3dhUB1ghIQooqZEBgAka4YMCBzDM/YQEGIGAAgQUa2ZwBBkIgAysZtHAiBtWNjWEILUgmxBGWVR/CCZIBcSIR2J1gYIERTIeA4whIB92B/whqBp2Byy8z9ggYcod9BihgOCKI7I/IgQUYKNDiEUgqoGD7IJaIYgntg4AiCfOzjyKH7ZNeP/tIcohi/SSgeP/89NfnX/9cwAICSKKAcHiDAReAgeANL3McC13epjCBQCgQAwvAnOZMF4KbzEEDY8gATALhBzrUoYQlnAQXBGFCEoBwhSsUAwncwAU6UIIEGVBDBlZYQg+6EAwjPKEJ65DCEtZBBDkURB9WqAYZqpASc8jAGOrwwie2MIQ/JKEQUUjDOhjRhVMkkAhmKAhKBAKHU6QEGXuoQzDMIYs7HKIKu2jFF85xjE+MIhjV+EE2urGEcEyhF7wwhw2owQ1e+P9CCWNYCCdCEYSCFOQcJpGBPYAEiGCM4U0m4UZBfiEQa0gkl7i0gRVQaQ4k8EMbzEAHKoHBA26AQyILWYc2UIlLGuAkGL6gAUOEskt0kMQKLrIHVGbADJ7xzCtjSYdZ1pKVdCDBHNRQS0+C8plgYGYpzUBMPxiTlcmE5RcE0UwqrTKafojQLq0pymy2spirbKUyxUlOM3DpnOnUwDqfSUpsctOb8QwnMwtkETqY040ZQOQnfQkGEhSQBHt4wx7oUIlArMAMfbjoRSexAihmYANj2ENGVwkCOLhBJJNUw0WO2Yc5QFSiFLUoRmW60Y5+NKQYHWlJT5oBMaj0oi2N6ET/K5rRmXI0Ax4FKRpwSgeSmnSIPPUpSzPz0qHKVKNGRepNj8lUnT41pcf86VSFGlOi0vSoNk3iVpu606+uFKgS3UNVL0oHEdwkmpCYBEfcUMqCPlMSbtgACTYwB0uoEqyuhEQgAjuJN5hwlWYQxF3zKkO+whOYgBUsYQ17TMQqlgSMdawgICtZvVbWr5gdbGHBmszELraxBRVtZOeA19JyybJ/DWxqN3tRD7T2s6+F7GhnO9m92va0udWsGdCwys66NrTCpS1ljevKDpLgDXEoaSESZNU+bIALOYQDJNZgTLDSdYYLCgQNLyLTU74hDNndLlG9C17xknerYuQCetVL/9T2vtcN2iXqRb0LhwyEd7yrNW9+w5DeLvHXugX+b3xlOuAC1xfB+M0AFxi83p8+GL4B7i4XCGxg+64SwxreL3uti90Ii5Sudp3DCuDABTdYN5GQHaUhcAiHSXQzuLzdawbeMAk4OBa20ZQxjW0M2xzvuMfGFC2QVyBkIhtZuEmu8RtuLIgmq0EFT/5xH1455SEXua9XnnGWt9zlL/s4ymIOcpmtLFssLxnHzDwEDtsM5ZWOmcpmfiyd02xnkHjAofm8iAcqGqGyWtQMbRDBG9zgYhHMWKPfDekq+xAIRJtB0aXkcB82ekxIS5rSlhY1pre66U5/mtFFJXWkJ73USv9z4dJqyHQSOb2GRC861KN+tKxPbetU43rVu+41qBsda1PTGtUpNLamke1pXyv1xQS4IS3rOQUU3LieZtCARbskAkjMYUyc9UCBITuJQNzwsWbItiq9wG3b1tML4WYuuc1dUDS4Ut2CYLe7wRrvbXe7oN/G97jLfe5+pxsO6263N82ZAW3P2+DHFGTCGbrwg/v74QCP+GoJbnFvU0njJOC4cj0OcXcffOTc9jZ1CSBXiweCA20463iX24YNBAKve8C5DMcABqWSgANu4AAU20BMsn6B2zbHuUd1/uie/zzobhh60TmAgqRnYOkkIGvNb57zDOy86pMAegaETvQ+GJ3/60pnekadjgKok93sPkc7zgOBdba7vetfb/rTxy71slMd72lfu9aRDnewy13wUZ/ETf5dzxAcApa5pTh5GToBAnvWutiE7AbgwPk9TCKwk/9C5S8vWIobdvOdD+znYSt60pv+hh83Q+otDwfM10HzJOB8BhQrAtmHfvRwKP3pca/71W8g85wFPuw58gbQj/P4yb99cJnPe9Zr2zPRF/4GiE/92V/f9qhXPfc3sIGbrEGifWiDolOpBjisgAwISGmXPJpDBGmB7qUckyFygwLRjMRxPzqAP/lrA/qzP/zDJjDYPxzyA/9btACchAEkEC4wQDdAwPgboQWsv/vLPwgs/yQJpEAARCEMLMAEWAMOTMAPZEARfMAI7L//8wILVEENZMH388D5C0EH1L8SrMEKTEEC1MEW7EAFVIM3WIFAyBs1mAMP8ALBggQ4IAEvgAQ3mAICi0IvCCw/OKXZ8rkVkEIP8ABJQL5TKgTUAUMppEIrxEIt5EIp/MIwTCxIIEMvMEM03AM1ZMMufMMrzMItzIAurMO7GsMyPMM0JIE1JIM2nMINqEJBlMNCpENUssNE1MNF7MNG/EM3lEQ4HMQ59EJMREQ8VEQ+9MNHBMRQpMQEMCACSKBJuMOl8zmfK4RDmARJ8Lk5cAMPukXxcgNJCAGfawM34LRb5IJZrMW4uv/DXNzFXvxFDQjGFiRGY0RGakysZZQEWjRGZ8RFXeTFcpvGahzGYoSEY0zGbWTGbwxGaBxHXwTGO7RGdFRHbUyvdkxHcIQEeJTGefS5esTGdczHbmzGW9SADNCAm8CrFVgBP4CDOViDZfSDiUygN/CDh4SiNfADjMTI2VoBLjiEPciAityMinSDjcLIiJzIh7RIScBIjcwAjvRIMMRDkSRJk3TJlFyBlZTIk3zJmATDmezIogRJnCzJlkRJlYTIn3RJbhTKjSzKj7zJkUxKoORJn1TKoMzIoaRJo6zKnNzKrGxKpcRIJ9wI8QqpT/uC9RKkjYIkEXA/sEqkWtMoirv/CCppu3xay4pqy4t6y1ISJLnMtNyjq2fDy29jtblkS7f0ArgczLk8prpEzDrIy4siAb6kthX4yz4IzLiUTMO0S1FLTL3MTMb0S8eETC8gTLo8TGKbJMtUzNPsS2Wrp7rCtoPqDA4opdjikmDyApAoJiWCLFeCpXUDtNg6J4ozA94MzjsDTuHsJuLsEmVCzueSrW6iDOf0TWDqTYaaTtGqzuMEuOQULu30Au6Ezu8cztgyzo+rMtg6T+ZUTy7zzuAETzERz/e8TvnMTvrsTcjKAEPDNg1IyTngAADjrkkIA2/kAF67MKRDOSIKNQ860ASVMI1q0MR6UJ8yMQnFqxT7/6lKKIRNwlAQY1AHhdDyEiMOmFARZalKuFAFLasNtbkVvS8QpVD+MlATpdGZstEOjVAXDdEGYy8Z9dH4MjG7kqFkFDLbsk9JyIDEMlBLkDjeysJo4k3HOqbIalJqfFImA6Yp5TQ3sNJ3E7MsRVDOOLjR+lIzegMo/U0yrdIrTdMaW1MuddNshFM5HVMqNVNVOrg71VI2BSsv5dMwhU46NVM77S083dI2RVQnjVPYkjmOOISKFD6yKqoxsIQhC6qlIqkVGAND2LueAiuWIoFMHS+56tRPnQT3Uyq1qr9SPdWoOiVW3VQUJVVYPUBRrVVTdQNUdatV1VRXvSpPBdX3o/9VUhVWYu0wXUVWUevVIZNVYHXWW03VXD1WTr22c5qDNlJPv+KopesxQWUuZfIAOqgyVVJONwrXNX1Ocp0Dc00l5UpXWFrXdg2u7IzXcf3Nci29e+2r99zXInPX8/zXAKVXe0XX8YSDg9W2dwVDcWXYgK3XgVWl5YJYiU1Yf22jcBOn4iRQnxs6QfiC+/MC+wKDjerASkOBBns0ErC0M7jADHDBizJZMEBZlWVZl4U/mJXZNqBZW7NZN8BZBNRZSDjZlEWAlT0soIU0OIhZlSLamr3ZnN00puVZp4VazpJaobXaojWDo01amdrZnn3an12Bl6XaoSVbs9XatPVa8rr/Nrg8OAIgg2iCLDETMc4SAUkgg3UdrTYoqXXbAHa7MXatLDPQW75NIg/4W88I3EAg3MhqAxpDXMXtK7w9psedg76V3IejXMG9XBLI3EkDuMQNhMX1XMfd29CN3MkFg8Ad3CMzXNU1Pc5dpdcFXdGl3co93dTd3Nbt3Mb9XUEY0ALSLmvzJEQoBCoNhBAAIWbjAg/KzECIgyRCA5vNAENILBLoRT+Y1eeN3mSk3sIrtevVgOzd3j7o3kkC33Yb37kyX+lNX+vFXmp83/j93vCt3zG5X/St3mB7A/Z1X+713vkV33IjX4waYGrMXwNGYP5VYPkFYAeWu0CAXumNRUPY/1jKmzL3ywA01LZ+IwERm7K4CoEALU83eAM4iN6NMqbl8oIWnklIKGGEVbkUrj/km14XJjIYluGGrGERnkmSNOGNZSgVpqQgfs4XjuEZnjJ8veERVmIeRmEnZmEhLqkpNmIrxuE10OEl7mEVBuIWjuIhBmMaFmMszoBdbD+TConBArX6015D0rsNGC8vqANJqyicWzpJwLSS1AIOkDSL4LkYixA8jgM9Dr8+/mNkXAFB3gNCxjVDRmQ6XuQ7bsJHNqlIRqhJDmSvu+RCnsBNVmQ7buRPhmTFkmRArmRTxuScPORErmNGBgNHfmU+HmVZtuRa1mRc7uSVVYMmjEUusM09SdiAXwwsZg6mzxI/SWip9Qtc0VO/9YMD4oPmGVrmDejDZ96AaDa9wG0p0xtnbM4tbebmcfZmcXZmEoDmFZBmc96D9RtnNMxm0Wvnv1JmeCYkeR5nei5nar7naSayfd5mgfbnbw5nhiboaT7n9WNmOFDofn5ngX5oZp6EyIvFvCEAvwFpAriEkS7pkRbpmyiAj86bS0jpm3jpmzjplh7pkB5plpbpmI5pkjbpmo5pnCZpna7pmZZpn77poRbqngZpoobpozbppM6bjw4IADs=);   
  }

以上是使用了base64编码,这样可以有效的解决我们没有网络地址图片的困境。本地图片转base64格式工具
如果你由自己的网页、服务器,你可以上传图片到自己的网页,然后用网络图片地址。下面给吃一个例子
http://8.131.91.46:6677/bgimage.png
你可以将background换成

background-image: url(http://8.131.91.46:6677/bgimage.png);

在这里插入图片描述
可以实现背景图片。

三、事件绑定

1)绑定方法

先在框架文件wxml中添加botton绑定,有以下两种方式:

<view bind:tap="fnName"></view>
<view bindtap="fnName"></view>

例子:<button type="primary" size="mini" bind:tap="tap_test">绑定事件</button>

2)处理函数

在js中需要调用小程序提供的Page方法来注册小程序的页面,我们可以在js文件的page方法中创建事件处理函数。

   tap_test(){
       console.log('tap触发')
     },

在这里插入图片描述

在这里插入图片描述

3)返回函数实例

一个现实的问题:如果我们需要在点击按钮的时候获得文本框中的内容,怎么办 ?

a)文本框教学

由于文本框默认没有边框,我们先去app.scss中加入边框设置。

input{
border: 1px solid black;
}

然后去xwml框架中加入input输入框

<input type="text"  />

在这里插入图片描述
就显示出来啦~

再说说文本框的事件绑定

<input type="text"  bind:input="input_convey_test"  />

以上代码在wxml中

     input_convey_test(event){
    //为了获取值,我们需要引入event
    console.log(event.detail.value)
   },

以上代码在.js文件中
console.log就是在console框中输出。
效果如下
在这里插入图片描述

在这里插入图片描述

b)冒泡事件和非冒泡事件

冒泡事件:子组件被触发,会触发父组件
非冒泡事件:子组件被触发,不会触发父组件
当我们这么写绑定的时候:<input type="text" catch:input="input_convey_test" />就不会触发父组件。
注意,默认为 冒泡事件。
currentTarget可以调取事件绑定者,target对应事件触发者

c)问题实现

xwml:

<view class="search-top">
	<input bind:input="inputCom" value="{{inputValue}}"></input>
	<text bindtap="doSearch">搜索</text>
</view>

js:

Page({
	data: {
	   // 存储输入框的值
	   inputValue: ''
  	},
  	// input输入框的bindinput事件
  	inputCom(e){
	    this.setData({
	        inputValue: e.detail.value
	    })
	    console.log(this.data.inputValue);
	},
	doSearch(){
		// 这里就可以使用输入框输入的值啦,通常我们在这里发起ajax请求会用到
   		console.log('search:',this.data.inputValue);
    }
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1640961.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【算法】数字接龙 走迷宫问题的一般处理思路

前言 其实走迷宫就是一个普普通通的深搜回溯嘛&#xff0c;但是我之前做的很多题都是在一个二维的地图上&#xff0c;只能上下左右四个方向走迷宫&#xff0c;在做数字接龙这道题的时候&#xff0c;相当于可以往8个方向走&#xff0c;虽然逻辑上不变&#xff0c;但按照我之前的…

可视化大屏应用(20):智慧水务、水利、防汛

hello&#xff0c;我是大千UI工场&#xff0c;本篇分享智智慧水务的大屏设计&#xff0c;关注我们&#xff0c;学习N多UI干货&#xff0c;有设计需求&#xff0c;我们也可以接单。 在智慧水务领域&#xff0c;可视化大屏具有以下几个方面的价值&#xff1a; 数据展示和监控 可…

wpf转换器

WPF&#xff08;Windows Presentation Foundation&#xff09;中的转换器主要是指IValueConverter接口的实现&#xff0c;它用于在数据绑定过程中转换源数据和目标数据的类型或表示形式。这种机制使得开发者能够灵活地处理数据&#xff0c;特别是在用户界面&#xff08;UI&…

【开源物联网平台】window环境下搭建调试监控设备环境

&#x1f308; 个人主页&#xff1a;帐篷Li &#x1f525; 系列专栏&#xff1a;FastBee物联网开源项目 &#x1f4aa;&#x1f3fb; 专注于简单&#xff0c;易用&#xff0c;可拓展&#xff0c;低成本商业化的AIOT物联网解决方案 目录 一、使用docker脚本部署zlmediakit 1.1 …

简述前后端分离架构案例

Hello , 这里是小恒不会java 。今晚1点写写关于RESTful接口的使用案例&#xff0c;本文会通过django原生js前后端分离的案例简单讲解。本文带你认识一下简化版的前后端分离架构 代码 本文案例代码在GitHub上 https://github.com/lmliheng/fontend前后端分离 先说说什么是前后…

Java | Spring框架 | 核心概念

控制反转&#xff08;IoC&#xff09;与依赖注入&#xff08;DI&#xff09;&#xff1a;轻松管理对象依赖 一、理解IoC和DI 控制反转&#xff08;IoC&#xff09;是一种设计原则&#xff0c;它通过将控制权从程序代码转移到外部容器来降低计算机代码之间的耦合关系。在传统的…

1. 傅里叶变换原理

1. 频率域的引入 1.1 时域角度 1.2. 频域角度 不同的角度表达的是同一件事情&#xff0c;从时间域和空间域来进行表达同一间事情 。时间域是都动态的&#xff0c;频率域是静止的 1.3. 时域角度和频域角度 1.4 相位 2 函数的时域角度 2.1 时间域 2.2 频率域 2.3 例子 2.3…

使用 TensorFlow 和 Keras 构建 U-Net

原文地址&#xff1a;building-a-u-net-with-tensorflow-and-keras 2024 年 4 月 11 日 计算机视觉有几个子学科&#xff0c;图像分割就是其中之一。如果您要分割图像&#xff0c;则需要在像素级别决定图像中可见的内容&#xff08;执行分类时&#xff09;&#xff0c;或者从像…

《Fundamentals of Power Electronics》——升压隔离型变换器、SEPIC隔离型变换器

以下是升压型隔离变换器的相关知识点&#xff1a; 升压型隔离变换器可以通过互换降压型隔离变换器的电源与负载的位置得到。升压型隔离变换器有许多种结构&#xff0c;此处简短的讨论两种情况。这些转换器主要使用在高压电源和低谐波整流器中。 图6.36所示是一种全桥型电路结…

MyBatis 使用 XML 文件映射

在MyBatis中 我们可以使用各种注解来配置我们Mapper 类中的方法 我们为什么要使用XML文件呢&#xff1f; 如果我们是一条非常长的SQL 语句 使用 注解配置的话&#xff0c; 会非常不利于阅读 如下 所以&#xff0c;就需要使用到一个XML文件来对SQL语句进行映射&#xff0c;那么 …

【linuxC语言】空洞文件

文章目录 前言一、空洞文件1.1 空洞文件的介绍1.2 用途 二、示例代码总结 前言 在 Linux 系统编程中&#xff0c;空洞文件是一种特殊类型的文件&#xff0c;它包含了逻辑上的空洞&#xff0c;也就是说文件中的某些部分并没有实际写入数据。尽管文件在逻辑上可能非常大&#xf…

pytorch笔记:ModuleDict

1 介绍 在 PyTorch 中&#xff0c;nn.ModuleDict 是一个方便的容器&#xff0c;用于存储一组子模块&#xff08;即 nn.Module 对象&#xff09;的字典这个容器主要用于动态地管理多个模块&#xff0c;并通过键来访问它们&#xff0c;类似于 Python 的字典 2 特点 组织性 nn…

GDPU JavaWeb 猜字母游戏

他在对你重定向打卡的大饼与立即跳转到你面前的谎言之间反复横跳。 sendRedirect与forward sendRedirect与forward区别 sendRedirect用于将请求重定向到另一个资源&#xff0c;可以是同一个应用程序内的其他 Servlet&#xff0c;也可以是其他 Web 应用程序的资源&#xff0c;…

开源版本管理系统的搭建一:SVN

作者&#xff1a;私语茶馆 1.Windows搭建SVN版本管理系统 1.1.SVN概要和组成 背景介绍 Svn是一个开源版本管理系统&#xff0c;由CollabNet公司于2000年发布&#xff0c;23年12月发布最新版本Apache Subversion 1.14.3。官方网站&#xff1a;Apache Subversion。 Svn可以直…

C++协程项目之协程库学习与实践(协程函数学习、线程切换实践)

网上协程实现原理大概有这么几种&#xff1a;调库、汇编、原语级别&#xff08;可能会破坏原本语义&#xff09;。我们今天简单学习和实践的是一种利用linux下库函数实现的协程。 首先来看这样一段代码&#xff1a; #include <iostream> #include <ucontext.h> #…

毫米波雷达原理(含代码)(含ARS548 4D毫米波雷达数据demo和可视化视频)

毫米波雷达原理 1. 传统毫米波雷达1.1 雷达工作原理1.2 单目标距离估计1.3 单目标速度估计1.4 单目标角度估计1.5 多目标距离估计1.6 多目标速度估计1.7多目标角度估计1.7 总结 3. FMCW雷达数据处理算法4. 毫米波雷达的目标解析(含python代码)5. ARS548 4D毫米波雷达数据demo(含…

最新AI创作系统,ChatGPT商业运营系统网站源码,SparkAi-v6.5.0,Ai绘画/GPTs应用,文档对话

一、文章前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持…

MySQL商城数据库88张表结构(46—50)

46、消息队列表 CREATE TABLE dingchengyu消息队列表 (id int(11) NOT NULL AUTO_INCREMENT COMMENT 序号,userId int(11) DEFAULT NULL COMMENT 用户id,msgTtype tinyint(4) DEFAULT 0 COMMENT 消息类型,createTime datetime DEFAULT NULL COMMENT 创建时间,sendTime datetim…

数据结构------栈的介绍和实现

目录 1.栈的一些初步认识 2.栈的实现 3.相关的函数介绍 &#xff08;1&#xff09;栈的初始化 &#xff08;2&#xff09;栈的销毁 &#xff08;3&#xff09;栈的数据插入 &#xff08;6&#xff09;判断是否为空 &#xff08;7&#xff09;栈的大小 4.栈的实现完整…

【全网首出】npm run serve报错 Expression: thread_id_key != 0x7777

总结 困扰了一天&#xff01;&#xff01;&#xff01;一直以为是自己哪里配置错了&#xff0c; 结果最后发现是node.js官方的问题&#xff0c; Node.js v16.x版本的fibers.node被弃用 本文阅读大概&#xff1a;3min #npm run serve时就报错 #找了一天的文章&#xff0c;找不…