小程序viewblock

⑴ 微信小程序scroll-view横向显示及异常显示处理

在微信小程序开发过程中，我们会经常使用到scroll-view组件，有时我们要在scroll-view中水平显示列表，类似这样：

但是当我们设置了scroll-view的flex-direction:row;等属性时，会发现没有用，列表依然垂直显示，像这样：

主要是因为display:flex;等属性对于scroll-view来说是没有用的，此时我们只需要设置子试图的属性display: inline-block;即可，不需要设置scroll-view的flex属性。

但是当我们设置完成后可能会出现一下情况：

会发现列表好像没有对齐，有两个子试图错位了，接下来我们可以通过设置子属性vertical-align:top;来解决，最后会得到我们想要的效果。

⑵ 小程序顶部文字太多

如果小程序顶部文字太多，建议如下操作方法/步骤:
1，分步阅读打开我们的小程序项目
2，点击项目目录的“utils”➜"app.json"
3，修改"navigationBarTitleText"后面的双引号里面的文字就可以了。

⑶ 微信小程序怎么设置文本换行(从后台拿的数据)

1、打开开发者工具，在项目的pages文件夹下，新建mypage文件夹，并在文件夹内新建mypage，并在app.json中将mypage设为第一页面。

⑷ 微信小程序之scroll-view可滚动视图区域

组件说明:

可滚动视图区域。

组件用法：

纵向滚动用法

Tip:

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。

当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）

当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）

效果图：

wxml

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">

    <view id="green" class="scroll-view-item bc_green"></view>

    <view id="red"  class="scroll-view-item bc_red"></view>

    <view id="yellow" class="scroll-view-item bc_yellow"></view>

    <view id="blue" class="scroll-view-item bc_blue"></view>

</scroll-view>

<view class="btn-area">

      <button size="mini" bindtap="tap">click me to scroll into view </button>

      <button size="mini" bindtap="tapMove">click me to scroll</button>

</view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

  data: {

    toView: 'green',

    scrollTop: 100,

    scrollLeft: 0

  },

  //滚动条滚到顶部的时候触发

  upper: function(e) {

    console.log(e)

  },

  //滚动条滚到底部的时候触发

  lower: function(e) {

    console.log(e)

  },

  //滚动条滚动后触发

  scroll: function(e) {

    console.log(e)

  },

  //点击按钮切换到下一个view

  tap: function(e) {

    for (var i = 0; i < order.length; ++i) {

      if (order[i] === this.data.toView) {

        this.setData({

          toView: order[i + 1]

        })

        break

      }

    }

  },

  //通过设置滚动条位置实现画面滚动

  tapMove: function(e) {

    this.setData({

      scrollTop: this.data.scrollTop + 10

    })

  }

})

css

.scroll-view_H{

  white-space: nowrap;

}

.scroll-view-item{

  height: 200px;

}

.scroll-view-item_H{

  display: inline-block;

  width: 100%;

  height: 200px;

}

横向滚动用法

Tip:

横向滚动无法使用scroll-into-view属性。

当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）

当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）

效果图：

wxml

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-left="{{scrollLeft}}">

    <view id="green" class="scroll-view-item_H bc_green"></view>

    <view id="red"  class="scroll-view-item_H bc_red"></view>

    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>

    <view id="blue" class="scroll-view-item_H bc_blue"></view>

</scroll-view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

  data: {

    toView: 'green',

    scrollTop: 100,

    scrollLeft: 0

  },

  //滚动条滚到顶部的时候触发

  upper: function(e) {

    console.log(e)

  },

  //滚动条滚到底部的时候触发

  lower: function(e) {

    console.log(e)

  },

  //滚动条滚动后触发

  scroll: function(e) {

    console.log(e)

  },

  //点击按钮切换到下一个view

  tap: function(e) {

    for (var i = 0; i < order.length; ++i) {

      if (order[i] === this.data.toView) {

        this.setData({

          toView: order[i + 1]

        })

        break

      }

    }

  },

  //通过设置滚动条位置实现画面滚动

  tapMove: function(e) {

    this.setData({

      scrollLeft: this.data.scrollLeft + 10

    })

  }

})

wxss

.scroll-view_H{

  white-space: nowrap;

}

.scroll-view-item{

  height: 200px;

}

.scroll-view-item_H{

  display: inline-block;

  width: 100%;

  height: 200px;

}

主要属性：

属性类型默认值描述

scroll-xBooleanfalse允许横向滚动

scroll-yBooleanfalse允许纵向滚动

upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件

lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件

scroll-topNumber设置竖向滚动条位置

scroll-leftNumber设置横向滚动条位置

scroll-into-viewString值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部

bindscrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件

bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件

bindscrollEventHandle滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

⑸ 微信小程序增加不同的数据怎么弄

打开微信小程序开发工具，创建项目，并新建页面文件
2
/7
打开页面文件，插入一个view标签和block标签，并添加wx:for循环指令
3
/7
接着新建一个页面JavaScript文件，在data对象中初始化数组weeks
4
/7
保存代码并查看左侧的模拟器，可以查看到一个列表
5
/7
在view标签下方，添加一个button按钮，然后添加bindtap
6
/7
在对应的JS文件中，添加一个点击事件addData，并打印数组结果
7
/7
打开内置浏览器控制台，查看打印结果

⑹ 支付宝小程序怎么转成微信小程序

把支付宝小程序和微信小程序的区别理清的话，把支付宝小程序和微信小程序进行相互转换，其实很简单

wxml:

把项目里axml后缀名的文件改成wxml，把acss后缀名的文件改成wxss，页面里如果有axml也要改成wxml，acss改成wxss

onTap改成bindtap，其他事件名也要从支付宝小程序的驼峰命名法改成微信小程序的单词之间的普通拼接

<input></input>改成<input/>

a:for改成wx:for

a:if改成wx:if

a:else改成wx:else

把show-count={{show_count}}改成把show-count="{{show_count}}"

我发现微信小程序用<text>会有很多bug，所以支付宝小程序里如果用了<text>，如果需要转成微信小程序，就用<view>并给<view>加上浮动或者给<view>设置display:inline-block;来代替<text>，我目前发现的<text>的bug有：<text>有一个padding-top，而且控制台看不到。

支付宝小程序里可以用a:for="{{doc_item.datestr.split(',')}}"，微信小程序里不支持wx:for="{{doc_item.datestr.split(',')}}"，所以，为了兼容支付宝小程序和微信小程序2个端，在支付宝小程序里也不要用a:for="{{doc_item.datestr.split(',')}}"，可以在js里就对list进行修改：for(let i = 0,len = list.length;i < len;i++){ list[i].datestr = list[i].datestr.split(',');}

js:

蓝牙：

错误提示：error.errorMessage改成error.errMsg

"pullrefresh":"true"改成"enablePullDownRefresh": true，下拉刷新页面时如果需要调用某个函数，在onPullDownRefresh里写

{{item.visitdate.substring(5, 7)}}这种语法在支付宝小程序里支持，在微信小程序里不支持，在list里加1个参数，来表示{{item.visitdate.substring(5, 7)}}

wx.uploadFile({fileName})改成wx.uploadFile({name})

wx.uploadFile返回的路径从res.apFilePaths[0]改成res.tempFilePaths[0]

my.showToast({content})改成wx.my.showToast({title})

my改成wx

把

my.setStorageSync({

  key: 'currentCity',

  data: {}

});

改成

wx.setStorageSync(

'currentCity', account_id

);

异步设置缓存，异步获取缓存，同步设置缓存，同步获取缓存，都要改掉，但是我平时都是用异步的

把e.target改成e.currentTarget

支付宝小程序里执行

that.setData({

            type : undefined

        });

不会报错，但是在微信小程序里会报错，所以，如果在微信小程序里要避免出现这种情况

模态框：

my.confirm改成wx.showModal

my.confirm里的属性：

content改成title

confirmButtonText改成confirmText

cancelButtonText改成cancelText

支付宝小程序里，因为my.showLoading以后经常隐藏不了loading，所以在支付宝小程序里很少用到my.showLoading，微信小程序里可以用wx.showLoading

app.json:

navigationBarTitleText改成defaultTitle

"pullRefresh": true改成"enablePullDownRefresh":true

acss:

支付宝小程序给button设置display:block;是有效的，但是微信小程序的button有一个默认样式button[size=mini]{display:inline-block;}，所以微信小程序里要给button的display、line-height、font-size、padding增加权重，比如给微信小程序里的button增加[size=mini]等

⑺ 小程序开发有哪些坑

做小程序开发运营需要注意两个坑：

1. 来自商标注册的坑

2. 来自投放广告的坑
   

⑻ 微信小程序 获取标签里面的数据 例如：view、text

在一些场景中，我们需要获取到标签里面的值来和接口返回的值做对比，一致则进行下一步，后者进行错误判断

<block wx:for='{{objectArray}}'  data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'>

        <text class='yuzhong'>{{item.name}}</text>

    </view>

主要在于 data- 这个上面  上面的那个name 和 id 是我自己定义的，你们可以随意定义一些语义化的词，

获取也很简单：

select:function(e){

console.log(e.currentTarget.dataset.name);

    },

⑼ iPhone6微信小程序怎么设置

微信小程序（下面简称小程序）近些月来刷爆了我们这些程序猿们的圈子，可以说无数的程序猿磨刀霍霍，准备在这快蛋糕上杀出一片天地。那么作为前端开发人员，小程序开发和我们平常的开发有什么不同的地方呢？让我们一起来走进门里看看。 我们从下面几个方向来了解一下小程序的开发： 1/debug/wxadoc/dev/framework/structure/debug/wxadoc/dev/devtools/download/debug/wxadoc/dev/component/?t=20161107） 组件的用法和标签一样，比如view组件< view>< / view>、text组件< text>< /view>。从写法上看起来和标签写法没什么区别，但是这些组件和标签最大的区别就是，组件本身设置了样式，比如icon组件： <view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"></icon> </block> </view> 我们只需要使用icon组件，不需要去自己设置样式就可以得到对应的icon样式。 在日常小程序开发中，比较常用的组件有view和text，其中用的最多的就是view，view本身并没有默认太多的样式，只有一个display:block样式，所以在我看来view就类似于div，我们也就把它当作div来使用就行了，然后你就会发现布局的时候到处都是view~，就像下图： 满眼全是view这种写法不需要像html一样考虑语义、seo神马的，非常的简单粗暴~。 额外提一下text组件，text拥有view所没有的一个特性就是text组件内的文本可以被复制、可以被复制、可以被复制（重要的事情说三遍~）。如果你希望某段文本可以被复制，那么你只能使用text组件。同时需要注意的一点，text组件内部不能嵌套view组件！嵌套无效！ 2/debug/wxadoc/dev/framework/view/wxss.html?t=20161107 二、JS差异 虽然小程序的交互采用的是js的语法，但是最大的变化就在于小程序无法使用选择器获取到页面的某个'dom'（应该不叫dom），这也是我们前端人员需要思路转变的地方，以往我们习惯于获取某个dom，然后这个dom上绑定各种事件，同时对页面进行一些改变操作，但是小程序并没有提供这种我们习惯的方法。 不能获取dom，也不能直接操作dom，那我们该怎么写呢？ 1. bind 和 catch bind和catch的作用从字面意思就可以大致猜出是用来绑定某些东西的，没错，这是小程序提供绑定事件的两个方法，而他们的区别在于bind不阻止冒泡，而catch阻止冒泡。小程序不提供获取dom的操作，而是让我们直接将事件绑定写入到组件内，如下代码： <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 看到这大家可能发现了bind后面跟着一个tap，这个tap是什么东东？ 2. tap tap其实就是一个事件，你可以理解为click，不过在手机端叫做tap，其它的事件还有：touchstart、touchmove、touchcancel、touchend、longtap。 bindtap=”tapName”组合起来就是绑定个tap事件,tapName则是对应的方法名，在这里需要注意一点，调用方法时不能够使用tapName(“txt”)这种形式来传参，小程序不支持。那么如果我们想要给方法传递一些参数该怎么做呢？接着往下看。 3.event 我们先看一段代码： Page({ tapName: function(event) { console.log(event) } }) 打印出来的结果: { "type":"tap", "timeStamp":895, "target": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "detail": { "x":53, "y":14 }, "touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }], "changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }] } 看到这么一堆东西大家可能有点晕，没事，我们来捋一捋。这个event想来大家应该明白是什么，event包含了目标对象的相关信息。那意味着，我们只要去修改目标对象的相关信息，就可以给tapName方法传输参数了。 那么如何修改目标对象的相关信息呢？在这之前我们必须要先了解下currentTarget和target两个属性，前者是绑定事件的组件，后者是触发事件的组件源。理解清楚这两个属性很重要！如果是上面例子这种情况，只有一个view组件，那么这两个属性的值没什么区别，但是如果换成下面的这个例子，就不一样了： <view id="tap1" data-hi="绑定组件" bindtap="tapName"> <view id="tap2" data-hi="触发组件源"></view> </view> 我们再输出看看（为了方便对比，只保留下currentTarget和target两个属性）: { "target": { "id": "tap2", "dataset": { "hi":"触发组件源" } }, "currentTarget": { "id": "tap1", "dataset": { "hi":"绑定组件" } } } 通过这个例子就可以很清楚的发现，currentTarget对应的就是外层绑定了tapName方法的view组件，而target对应的则是内部的view组件。 通过两个例子，相信大家也注意到了两个属性，data-hi和dataset，这两个属性有什么关系呢？大家应该猜到了，dataset的值其实就是我们设置的data-xxx的值，而xxx则是dataset里面的key。大家对于data-xxx的写法应该不陌生，就是html中常见的自定义属性的写法，而在小程序中，则被用来传参。 4. 改变样式 前面就提到了小程序并不提供获取和操作dom的能力，这就又带来了一个问题，我们如何去动态的改变样式呢？我们先看下例子： <view class="container" style="overflow: {{screenType?'hidden':'scroll-y'}}" bindtap="bindType"> Page({ data: { screenType: '' }, bindType: function(){ this.setData({ screenType: '1' }) } })</view> 大家是不是有点明白了呢，我们没有办法直接获取dom然后去改变他的样式，所以我们只能通过data里的属性来控制样式的变化，如上面的代码，overflow的值取决于screenType的值是否存在，如果存在，则overflow: hidden，反之overflow: scroll-y；那么我们只需要改变screenType的值。要改变screenType的值也简单了，小程序提供了this.setData方法，可以设置data内的值。 四、其它 最后提一下我们熟悉的ajax请求，在小程序里，它不叫ajax，而叫做wx.request。用法和ajax没什么区别，唯一需要特别注意的是，请求必须是https请求！而不是平常的http请求！除了必须要是https请求以外，还需要到小程序的后台里设置合法域名，否则无法请求。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。